二次封裝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>

運行預覽