Vue3+elementplus動(dòng)態(tài)表格table實(shí)現(xiàn)

描述：使用el-table的時(shí)候，根據(jù)需求，能夠?qū)崿F(xiàn)由字段個(gè)數(shù)動(dòng)態(tài)增加表格列，表格行數(shù)固定為3行。

實(shí)現(xiàn)效果：

實(shí)現(xiàn)代碼：

// 行數(shù)由tableData2控制，列數(shù)由tableData字段動(dòng)態(tài)控制（for循環(huán)）
<el-table
      v-if="statement_flag"
      border
      :data="tableData2"
      style="margin-bottom: 40px"
    >
      <el-table-column
        label="界面名稱(chēng)"
        min-width="150"
        align="center"
        prop=""
      >
        <template #default="scope">
          {{ ViewTxt[scope.$index] }}
        </template>
      </el-table-column>
      <el-table-column
        label="用戶(hù)"
        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>



// 行數(shù)由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>

總結(jié)：如果需要控制行數(shù)，并且動(dòng)態(tài)加載列數(shù)，故需要兩個(gè)變量進(jìn)行設(shè)置，這里采用的就是這個(gè)思想，能夠?qū)崿F(xiàn)需求效果。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-840380.html

到了這里，關(guān)于Vue3+elementplus動(dòng)態(tài)表格table實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！