二次封装Element UI Table实现动态列

 

开发中是否会遇见在一个页面中加载的table的列是不固定的，列名需要根据后台数据而动态加载；so element ui 的table 已经不再满足需求，我们得在他的基础上再次封装

增加 refactor_table.vue 组件

<template>
    <el-table :data="tableData"
              border
              :height="tableHeight"
              style="width: 100%"
              v-loading="tableLoading"
              :size="tableSize"
    >
        <el-table-column
            v-for="(th, key) in tableColumnsConfig"
            :key="key"
            :prop="th.prop"
            :label="th.label"
            :fixed="th.fixed"
            :width="th.width"
            :align="th.align"
            show-overflow-tooltip="true">
            <template slot-scope="scope">
                <div v-if="th.prop==''">
                    <el-button v-for="(btn,index) in th.operate" type="text" size="small" :key="index"
                               :style="btn.type=='del'?'color:#ff3e3e' : ''" @click="btnHandle(scope.row,btn.type)">
                        {{btn.name}}
                    </el-button>
                </div>
                <div v-else>
                    <span>{{ scope.row[th.prop] }}</span>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    export default {
        name: 'refactor_table',
        props: {
            /**
             * table  渲染所需数据
             * 如：[{id:1,name:'abc'},{id:2,name:'def'}]
             */
            tableData: {
                type: Array,
                default: function () {
                    return []
                }
            },
            /**
             *  设置table 加载icon
             */
            tableLoading: {
                type: Boolean,
                default: false
            },
            /**
             * 设置table 高度
             */
            tableHeight: {
                type: Number
            },
            /**
             * 设置table 大小（medium / small / mini）
             */
            tableSize:{
              type:String
            },
            /**
             * table 的column 相关配置信息
             * 如：[{
             *      prop: 'id',
                    label: '编号',
                    width: 100,
                    align: 'center'
                    }]
             如果需要操作列需要指定prop为空同时增加operate属性，配置如下
             [{
               prop: '',
               label: '操作',
               width: 280,
               align: 'center',
               operate:[
                   {
                       type:'del',
                       name:'删除',
                   },
                   {
                       type:'add',
                       name:'新增',
                   }
               ]]
            */
            tableColumnsConfig: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {
            btnHandle(row, type) {
                this.$emit("operateHandle", row, type)
            }
        }
    }
</script>

 

在main.ve中调用

<template>
    <div>

        <refactor-table :table-data="tableData"
                        :table-columns-config="tableColumns"
                        :table-loading="loading"
                        :tableSize="tableSize"
                        @operateHandle="tableOperateHandle"
        ></refactor-table>
    </div>
</template>

<script type="text/ecmascript-6">
    import RefactorTable from '@/components/refactor_table';

    export default {
        data() {
            return {
                tableHeight: 300,
                tableData: [],
                tableColumns: [],
                tableSize: 'mini'
            }
        },
        created() {
            this.loadingTable();
        },
        methods: {
            loadingTable() {
               // 初始化table 数据
                this.tableData = [
                    {id: '1938238', name: '节点', grade: 'ERWFD'},
                    {id: '3241', name: '节点B', grade: 'FDD'},
                    {id: '8238', name: '节点C', grade: 'FVDFA'},
                    {id: '3424', name: '节点', grade: 'ERWFD'},
                    {id: '32ree', name: '节点B', grade: 'FDD'},
                    {id: '821221', name: '节点C', grade: 'FVDFA'},
                    {id: '89238', name: '节点', grade: 'ERWFD'},
                    {id: '323432', name: '节点B', grade: 'FDD'},
                    {id: '2231545', name: '节点C', grade: 'FVDFA'},
                    {id: '213435', name: '节点C', grade: 'FVDFA'}
                ];
                // 初始化 table columns
                 for(let key in this.tableData[0]){
                    this.tableColumns.push({
                        prop: key,
                        label: key,
                        align: 'center'
                    });                
                }
                 // 最后增加一列为操作
                 this.tableColumns.push( {
                    prop: '',
                        label: '操作',
                    width: 280,
                    align: 'center',
                    operate:[
                    {
                        type:'del',
                        name:'删除',
                    },
                    {
                        type:'add',
                        name:'新增',
                    }
                ]});        
            },
             /**
              * 接收table 组件操作时传入的参数
              * @param row {object} 所选行
              * @param type {String} 操作类型（add,del）
              */
             tableOperateHandle(row,type){
                 console.log(row,type)
             }
        },
        components: {
            RefactorTable
        }
    }
</script>

 

运行预览