普通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

<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 并且要搭配 row-key="id"一起使用，目前只有展开所有这个属性功能

5.在

普通element ui table组件的使用

猜你喜欢