普通element ui table組件的使用

1.使用基礎的element ui 的table的基礎使用

首先，使用前要先引用element庫到項目中，可以直接引入element的js和css或者在vue項目下按需加載不同的組件

廢話不多說，直接引入element 最基礎的table原型

    說明：tableData數據格式是數組對象，el-table-column的prop對應數組對象的屬性，label為表頭名稱

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

樣式效果如下

 

 

1.加入固定表頭

在原來的內容里面加上height="200",就會產生如下效果

 ..<el-table
      :data="tableData"
      height="200"
      style="width: 100%">...

 

 

 2.加入固定列

在需要固定列的對應el-table-column     加上fixed屬性,當寬度超過設置的table寬度的時候，就會出現滾動條，為了實現超出，我把table寬度設小

<el-table
      :data="tableData"
      height="200"
      style="width: 600px">
      <el-table-column
        prop="date"
        fixed   
        label="日期"
        width="180">
      </el-table-column>

3.加入邊框  加入邊框屬性   border

<el-table
      :data="tableData"
      height="200"
      style="width: 600px"
     border
>

　　

4.左邊實現樹

在el-table 處加入  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"， 以及row-key="id"  並且在數據部分加入children的層級數據

<el-table
      :data="tableData"
      height="200"
      style="width: 600px"
     border
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

數據格式加入幾個數據，需要展示樹層級的，加入children的屬性下的對象

{
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄',
        children: [{
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀區金沙江路 1519 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀區金沙江路 1519 弄'
          }]
        }。。。

默認是收縮的，如果要默認展開就在el-table 加入屬性default-expand-all