网页设计与制作教程ppt免费下载/官网优化哪家专业

开发中是否会遇见在一个页面中加载的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-columnv-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 columnsfor(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>

运行预览