Vue3+elementplus动态表格table实现

Vue3+elementplus动态表格table实现

描述：使用el-table的时候，根据需求，能够实现由字段个数动态增加表格列，表格行数固定为3行。

实现效果：

实现代码：

// 行数由tableData2控制，列数由tableData字段动态控制（for循环）
<el-table
      v-if="statement_flag"
      border
      :data="tableData2"
      style="margin-bottom: 40px"
    >
      <el-table-column
        label="界面名称"
        min-width="150"
        align="center"
        prop=""
      >
        <template #default="scope">
          {{ ViewTxt[scope.$index] }}
        </template>
      </el-table-column>
      <el-table-column
        label="用户"
        align="center"
        min-width="150"
        prop=""
      >
        <template #default="scope">
          ALL
          <!-- {{ checkboxGroup2 }}  -->
        </template>
      </el-table-column>

      <el-table-column
        v-for="(item,index) in tableData"
        :key="index"
        align="center"
        min-width="150"
        :label="item.name"
      >
      </el-table-column>
</el-table>



// 行数由tableData2控制，所以只需要固定为3行即可
<script setup>
if (tableData.value.length >= 3) {
    tableData2.value = tableData.value.slice(0, 3)
  } else {
    tableData2.value[0].name = tableData.value.name
    tableData2.value[0].action = tableData.value.action
    while (tableData2.value.length < 3) {
      tableData2.value.push({})
    }
  }
</script>
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
47
48
49
50
51
52
53

总结：如果需要控制行数，并且动态加载列数，故需要两个变量进行设置，这里采用的就是这个思想，能够实现需求效果。