el-table【el-table-column】 ：普通列 / 自定义列---封装el-table组件
1.基础的table表
点击查看element el-table 官网链接
html
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> 复制代码
js
<script> export default { methods: { handleClick(row) { console.log(row); } }, data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 } ] } } } </script> 复制代码2.列表基本一致的情况下，可以循环生成el-table-column
想要增加表头时直接在this.colConfigs处增加即可
<template> <el-table :data="tableData"> <el-table-column v-for="{ prop, label } in colConfigs" :key="prop" :prop="prop" :label="label"> </el-table-column> </el-table> </template> <script> export default { data () { this.colConfigs = [ { prop: 'date', label: '日期' }, { prop: 'name', label: '姓名' }, { prop: 'address', label: '地址' } ] return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }] } } } </script> 复制代码3. 当有个别列为特殊列即需要自定义内容列时，基本用法solt
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> </template> 复制代码
4.当普通列和自定列一起作为组件使用时
涉及到的知识点：
slot 插槽用法
→ vue slot 官网解释
→ 其他作者的slot解释
component 自定义组件用法
→ 详细的component解释
封装的组件
// my-table.vue <template> <el-table :data="data"> <template v-for="colConfig in colConfigs"> <slot v-if="colConfig.slot" :name="colConfig.slot"> <component v-else-if="colConfig.component" :is="config.component" :col-config="colConfig"> </component> <el-table-column v-else v-bind="colConfig"></el-table-column> </template> </el-table> </template> <script> export default { props: ['colConfigs', 'data'] } </script> 复制代码v-if ：调用组件，在组件标签内加el-table-column 通过slot定位到组件内的slot名 对应的位置处
v-else-if：单独定义el-table-column为一个特殊组件放入component中
v-else：普通的列
调用封装好的组件：普通列、自定义列
<template> <my-table :data="tableData" :col-configs="colConfigs"> <!-- slot="opt" 不能省略，需要与下面配置项中的对应 --> <el-table-column slot="opt"> <el-button size="mini" slot-scope="{ row }">查看</el-button> </el-table-column> </my-table> </template> <script> const PrefixPlusText = { props: ['colConfig'], template: ` <el-table-column :label="colConfig.label"> <span :slot-scope="{ row }"> {{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }} </span> </el-table-column> ` } export default { data () { this.colConfigs = [ { prop: 'change', label: '变化' component: PrefixPlusText }, { prop: 'name', label: '趋势', component: PrefixPlusText }, // 模版中的元素需要对应的有 slot="opt" 属性 { slot: 'opt' } ] return { tableData: [{ change: '12%', trend: '10% }, { change: '-12%', trend: '-10%' }] } } } </script>
作者：冗梓默
链接：https://juejin.cn/post/7025627462608355358