elementui table组件的使用_element ui table

elementui table组件的使用

基于elementUI组件对table对使用。

表格的使用

绑定数据tabledata

<el-table
        ref="multipleTable"
        border
        :data="tableData"
        tooltip-effect="dark"
        height="100%"
        @selection-change="handleSelectionChange"
        stripe
      >
<el-table>
1
2
3
4
5
6
7
8
9
10

表头的渲染

<el-table-column
          v-for="(item, index) in tableLabel"
          :key="index"
          :prop="item.prop"
          :width="item.width"
          :label="item.label"
          :align="item.align"
          :show-overflow-tooltip="true"
          :resizable="false"
        >
          <template slot-scope="scope">
            <slot :name="item.prop" :data="scope">
              <span>{{ handleTbCellVal(scope.row[item.prop])}}</span>
            </slot>
          </template>
        </el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

tableLable为表头的数据

循环表头数据来渲染表头，template里面可以在父组件里面覆盖子组件里面渲染的内容。

可以增加表格对列不被tableLable渲染影响

直接el-table-column写在el-table里面实现

tableLable 数据样式

const tableLabel = [{
  label: '1',
  align: 'center',
  prop: '1'
},
{
  label: '2',
  align: 'center',
  prop: '2'
},
{
  label: '3',
  align: 'center',
  prop: '3'
},
{
  label: '4',
  align: 'center',
  prop: '4'
},
{
  label: '5',
  align: 'center',
  prop: '5'
},
{
  label: '6',
  align: 'center',
  prop: '6'
},
{
  label: '7',
  align: 'center',
  prop: '7'
},
{
  label: '8',
  align: 'center',
  prop: '8'
},
{
  label: '9',
  align: 'center',
  prop: '9'
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46