Vue3+elementplus动态表格table实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+elementplus动态表格table实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue3+elementplus动态表格table实现

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

实现效果：

Vue3+elementplus动态表格table实现,前端篇,vue.js,javascript,ecmascript,前端

实现代码：

// 行数由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>