ele用el-tree和el-table 实现table字段自定义选择

cxy_12345

已于 2022-04-18 14:32:26 修改

阅读量848

点赞数

文章标签： vue 前端

于 2022-04-18 11:35:35 首次发布

本文链接：https://blog.csdn.net/cxy_12345/article/details/124245622

版权

本文介绍了如何在Vue项目中使用el-tree组件和el-table组件，实现用户自定义选择表格显示字段的功能。通过el-tree展示字段列表，用户选择后在el-table中动态渲染，提供灵活的前端界面定制能力。

摘要由CSDN通过智能技术生成

<template>
  <div class="p">
    <div class="p1">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
        >

        </el-table-column>
        <el-table-column
            v-for="c in checkColumns"
            :prop="c"
            :label="c"
            :key="c">
        </el-table-column>
      </el-table>
    </div>
    <div class="p2">
      <el-tree :data="treeData" show-checkbox :props="defaultProps" @check-change="handleCheckChange"
               @node-click="handleNodeClick">