一、背景
vue2项目中用到el-table这个组件,但基础的功能不够用,所以需要自定义
二、表头自定义
比如要让表头展现出下面的形式:
只需使用 slot="header" slot-scope="scope" 对插槽进行定义,并绑定变量
<el-table> <el-table-column><template slot="header" slot-scope="scope"><el-inputv-model="search"placeholder="输入关键字搜索"/></template></el-table-column>
</el-table>data() {return {search: ''}
},
三、表格内容自定义
有时除了对表头要做定制外,对表格内容也需要做定制,比如按照表格值是0or1来显示不同的内容等。
3.1对表格数据做二次处理
一个经典例子就是时间戳格式的转换(后端传回来的数据往往不是xxxx-xx-xx这种形式)。
只需给 el-table-column 的 formatter 属性绑定一个自己写的函数即可,比如下面这样:
<el-table-column prop="Start" :formatter="dateFormat" label="开始时间"></el-table-column>
dateFormat(row, column) {const date = row[column.property]if (date === null || date === undefined) {return '<null>'}return date
},
3.2改变表格内容的展示形式
只需在列标签内部定义 slot-scope="scope"这个插槽然后写入自定义内容即可
<el-table :data="tableData" border stripe style="width: 100%"><el-table-column prop="name" label="类名" width="180"></el-table-column><el-table-column prop="icon" label="图标" width="180"><template slot-scope="scope"><i :class="scope.row.icon"></i></template></el-table-column>
</el-table><script>
export default {data() {return {tableData: [{name: '图标1',icon: 'fa fa-camera-retro',},{name: '图标2',icon: 'fa fa-camera-retro2',},]}}
}
</script>
上述代码效果如下:
3.3内容中插入图片
和3.2的做法类似,不过这里需要注意要使用 :src 这种写法(绑定变量而非字符串)
<el-table-column prop="img" label="图片"><template v-slot="scope"><img :src="scope.row.img" width="90" height="90"></template>
</el-table-column>data() {return {imgs: [{img: require('@/assets/images/views/login-logo1.png') },{img: require('@/assets/images/views/login-logo2.png') }, {img: require('@/assets/images/views/login-logo3.png') },]}
}
3.4根据单元格的值来展示不同的内容
比如需要根据用户状态来显示“已启用”或“已禁用”按钮。
思路:在插槽中使用v-if来进行条件判断
<el-table-column label="是否启用" prop="user_status" width="100"><template slot-scope="scope"><div><el-button v-if="scope.row.user_status == 1">已启用</el-button><el-button v-else>已禁用</el-button></div></template>
</el-table-column>
效果如下: