前言
element-plus 这个 UI 组件库，虽说基本和 vue2 + element-ui 差不多，但还是有点区别，以至于按emenent-ui的写法来写会发现报错，下面我将讲解一下element-ui和element-plus的自定义表格的用法
element 中的自定义列表格用法
自定义列时只需要声明
slot-scope="scope"即可。自定义内容需要使用数据时只需要使用scope.row即可获取该行数据。
<template slot-scope="scope"> <div class="overPointr2"> {{scope.row.address}} </div> </template>
完整的代码：
<el-table :data="tableData" style="width: 100%"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="name" label="姓名" min-width="120"> </el-table-column> <el-table-column label="地址" min-width="300"> <template slot-scope="scope"> <div class="overPointr2"> {{scope.row.address}} </div> </template> </el-table-column> <el-table-column label="操作" min-width="120"> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 移除 </el-button> </template> </el-table-column> </el-table>
element-plus 中的自定义列表格用法
跟 element 差不多，只不过不再是声明
slot-scope="scope"，而是按需声明#default或者#default="scope"。
- 自定义内容需要使用该行数据时，声明
#default="scope"，再通过scpoe.row获取数据。
<el-table-column fixed="right" label="操作" width="100"> <template #default="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>
- 自定义内容需要使用该行数据时，声明 v-slot:default="scope"，再通过
scpoe.row获取数据。
<el-table-column label="操作" align="center"> <template v-if="true" v-slot:default="scope"> <el-button type="primary" size="small" @click="bj"><el-icon><Edit /></el-icon> <span style="margin-left: 3px">编辑</span></el-button> <el-button type="danger" size="small" @click="sc(scope.row)"><el-icon><Delete /></el-icon> <span style="margin-left: 3px">删除</span></el-button> </template> </el-table-column>
