全能工程师手册：详解el-tableborder

一、介绍

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