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