Common use element ui table assembly

Based on the use of the table 1. The basic element ui

First of all, before using the first reference element library to the project can be introduced element of js and css directly or in the project are loaded on demand vue different components

Ado, directly introduced into the most basic element of prototype table

Description: tableData data format of the object is an array, corresponding to array object property prop el-table-column of, label header name is

 <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"Name="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: 'Putuo District Jinsha Road Lane 1518 ' 
          }, { 
            DATE: ' 2016-05-04 ' , 
            name: ' Xiaohu ' , 
            address: ' Jinsha Putuo District Road Lane 1517 ' 
          }, { 
            DATE: ' 2016- 05-01 ' , 
            name: ' Xiaohu ' , 
            address: ' Jinsha Putuo District Road Lane 1519 ' 
          }, { 
            DATE: ' 2016-05-03 ' , 
            name: ' Xiaohu' , 
            Address: ' Jinsha Putuo District Road Lane 1516 ' 
          }] 
        } 
      } 
    }
   </ Script>

Style effect is as follows

1. Fixed header added

In the original content inside with height = "200", will produce an effect

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

2. Add the fixed column

Corresponding el-table-column requires a fixed columns plus the fixed property, provided when the width exceeds the width of the table, there will be a scroll bar, in order to achieve exceeded, provided the width of the small table I

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

3. Add the border to join the border attribute

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

4. left to achieve tree

Was added at el-table: The props-Tree = "{children: 'children', hasChildren: 'hasChildren'}", and the row-key = "id" and the data portion of the hierarchical data added children <EL- Table

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

 :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >

Add a few data format data, you need to show a tree hierarchy, adding an object under the children of property

{ 
          DATE: ' 2016-05-01 ' , 
          name: ' Xiaohu ' , 
          address: ' Jinsha Putuo District Road Lane 1519 ' ,
           Children: [{ 
              DATE: ' 2016-05-01 ' , 
              name: ' Xiaohu ' , 
              address: ' Jinsha Putuo District Road Lane 1519 ' 
            }, { 
              DATE: ' 2016-05-01 ' , 
              name: ' Xiaohu ',
              address: ' Jinsha Putuo District Road Lane 1519 " 
          }] 
        }. . .

The default is shrinking, if you want to join a default deployment attribute default-expand-all in el-table and to match row-key = "id" used together, only expand all the properties feature

5. In

Common use element ui table assembly

Guess you like