全能工程師手冊：詳解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/zh-tw/n/332449.html