一、介绍
el-tableborder是elementUI所提供的表格组件之一，它可以创建带有边框的表格，并支持多种自定义的特性。比较适合用作后台管理系统中的数据展示。
它支持众多特性，如：自定义列、表单操作、百分比宽度等，同时也支持可拖曳表头，动态排序和单元格合并等功能。
在后续的内容中，我们将会在不同的方面对el-tableborder做一个详细的介绍。
二、基本的创建和使用方式
下面是一个基本的el-tableborder的创建和使用方式：
//html部分
<el-tableborder
:data="tableData"
height="400"
border
style="width: 100%">
<el-tablecolumn
prop="date"
label="日期"
width="180">
</el-tablecolumn>
<el-tablecolumn
prop="name"
label="姓名"
width="180">
</el-tablecolumn>
<el-tablecolumn
prop="address"
label="地址">
</el-tablecolumn>
</el-table>
//js部分
data() {
return {
tableData: [{
date: '2022-01-01',
name: '全能工程师',
address: 'XX大厦'
}]
}
}
在以上代码的基础上，我们可以对表格进行一些自定义设定，比如：调整边框的颜色、设定表头固定、设置高度为自适应等等。这方面可参考elementUI的官方文档。
三、自定义列
el-tableborder提供了自定义列的功能，可以在表格中加入自定义组件。
通过在<el-tablecolumn>标签中设定type属性来指定自定义组件类型。
修改
删除
以上代码中，我们设定了一个名为操作的自定义列，其中slot-scope用于获取当前行的数据对象，进而进行操作。
四、表单操作
在一些后台管理系统中，常常需要对表格中的数据进行增删改查等操作，而el-tableborder提供了相应的支持。
我们可以使用elementUI提供的Dialog、Form等组件来实现相应的功能，代码如下：
修改
删除
取消
提交
原创文章，作者：KCMTA，如若转载，请注明出处：https://www.506064.com/n/332449.html
微信扫一扫 
支付宝扫一扫 