利用el-table-column
的自定义列模板能够与其余组件使用实现复杂的表格。vue
因为我想实现一个可编辑的表格,同时由于表格有不少个,同时列名也是不同的(数量和名称),因此想偷个赖写个动态的切换的功能。
如下为代码:git
<template> <div> <el-button @click="change">测试按钮</el-button> <el-table :data="tableData" class="tb-edit" style="width: 100%"> <el-table-column v-for="item in tableHead":label="item.label" :property="item.property" width="180"> <template slot-scope="scope"> <el-input v-model="scope.row[scope.column.property]" ></el-input> </template> </el-table-column> <el-table-column label="操做"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> import {example1, example2} from './columns'; export default { name:'ruleTable', data() { return { // 表头 tableHead:example1, // 数据值 tableData: [{ date: '2016-05-02', name: '王小虎6666', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎45', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎333', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎222', address: '上海市普陀区金沙江路 1516 弄' }], } }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); }, change(){ this.tableHead = example2; } } } </script>
代码关键在这里:github
<el-table-column v-for="item in tableHead":label="item.label" :property="item.property" width="180"> <template slot-scope="scope"> <el-input v-model="scope.row[scope.column.property]" ></el-input> </template> </el-table-column>
经过一个循环拿到列的标签和列名,格式以下:web
// 表头1 let example1=[ { label:'姓名', property:'name' },{ label:'地址', property:'address' } ]; // 表头2 let example2=[ { label:'姓名', property:'name' },{ label:'地址', property:'address' },{ label:'日期', property:'date' } ]; export { example1, example2 };
在自定义模板里面经过scope.row[scope.column.property]
取到当前行的列字段与输入框进行双向绑定,因而就是实现了可编辑的动态表头的表格。svg
固然咱们的表格数据也就能够根据实现来变化了。测试
vue-element-extends 这个基于 el-table 的封装的可编辑表格不错,推荐一波。@q平面人this