<!--
 * @Date: 2021-11-30 17:19:51
 * @LastEditors: JinxuChen
 * @LastEditTime: 2021-12-13 11:33:07
 * @FilePath: \GpsCardAdmin\src\components\TTable\TTable.vue
 * @description: 封装通用的table组件
-->
<template>
    <div class="app-container">
        <!-- 表格 -->
        <el-table :data="tableData" border fit highlight-current-row @sort-change="sortChange" >
            <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column> -->
            <template v-for="column in columns">
                <!-- 标题 -->
                <el-table-column
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.title"
                    :fixed="column.fixed"
                    v-if="!column.action"
                    height="460"
                />
                <!-- 操作列 -->
                <el-table-column :label="column.title" :key="column.prop" v-else fixed="right" min-width="120">
                    <template slot-scope="scope">
                        <el-button-group v-for="(fn,index) in column.actions" :key="index">
                            <el-button
                                :type="fn.type"
                                :icon="fn.icon"
                                @click="handleClick(scope.row,fn.fnName)"
                            >{{fn.title}}</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <!-- 分页 -->
        <!-- <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
        />-->
    </div>
</template>

<script>
/* import Pagination from "@/components/Pagination"; */
import waves from "@/directive/waves"; // waves directive
export default {
    name: "",
    /* components: { Pagination }, */
    directives: { waves },
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        columns: {
            type: Array,
            default: () => []
        },
        btnType: {
            type: String
        }
    },
    data() {
        return {
            total: 1,
            tableKey: 0,
            listQuery: {
                page: 1,
                limit: 10,
                importance: ""
            },
            importanceOptions: ["1", "2", "3"],
            list: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                }
            ]
        };
    },
    methods: {
        getList() {},
        sortChange() {},
        handleFilter() {},
        handleClick(row, fnName) {
            this.$emit(`${fnName}`, row);
        }
    }
};
</script>

<style scoped>
</style>
