目的：使其table中得每个单元格都能做到自定义
新建一个组件 STable.vue
<template><el-table:data="list"style="width: 100%"><el-table-columnv-for="item in columns":key="item.key":prop="item.key":label="item.title"width="180"><template slot-scope="scope"><ex-slot v-if="item.render" :render="item.render" :row="scope.row" :index="scope.$index" :column="item" /><span v-else>{{scope.row[item.key] || '-' }}</span></template></el-table-column></el-table></template><script>// 自定义内容的组件var exSlot = {functional: true,props: {row: Object,render: Function,index: Number,column: {type: Object,default: null}},render: (h, data) => {const params = {row: data.props.row,index: data.props.index}if (data.props.column) params.column = data.props.columnreturn data.props.render(h, params)}}export default {components: {exSlot,},props:{columns:{type:Array,default:()=>[]},list:{type:Array,default:()=>[]}},data() {return {tableData: [{date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}} }</script><style></style>
使用
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><STable :columns="columns" :list="list"/></div></template><script>import STable from './STable.vue'export default {name: 'app',data(){return{columns:[{title:"姓名",key:"name",align:"center"},{title: "年龄",key: "age",align: "center"},{title: "地址",key: "address",align: "center"},{title: "操作",key: "caozuo",align: "left",render:(h,params)=>{if (!params.row.operations||params.row.operations.length === 0) {return h('div', '')}let arr = []params.row.operations.forEach(type => {arr.push(h("el-button",{props: {type:"primary",icon:"el-icon-edit"},on:{click:()=>{alert("执行了",JSON.stringify(params.row),type)}}},this.getType(type)))})return h('div',arr)}},],list:[{name:"yangjie",age:18,address:"aaaa",operations:[0]},{name:"junchi",age:33,address:"bbb",operations:[2]},{name:"haojie",age:45,address:"ccc",operations:[]},{name:"king",age:59,address:"dddd",operations:[1,0]},],}},methods: {getType(type){if(type === 0){return "修改"}else if(type === 1){return "删除"}else if(type === 2){return "重置"}}},components: {STable}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>
