前言
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>