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

cxy_12345

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

阅读量928

点赞数

文章标签： vue 前端

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

本文链接：https://blog.youkuaiyun.com/cxy_12345/article/details/124245622

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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"></el-tree>
    </div>


  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      checkColumns:[],
      tableData: [{
        id:1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id:2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id:3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id:4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      treeData: [
        {
          label: 'columns',
          children: [
            {
              label: 'name',
            },
            {
              label: 'date',
            },
            {
              label: 'address',
            },
          ]
        },
        ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick( data ) {
      console.log( data );
    },
    handleCheckChange( data, checked ) {
      //选中
      if(checked){
        if(data.label != 'columns'){
          this.checkColumns.push(data.label)
        }
      }else{
        //取消选中
        if(this.checkColumns.indexOf(data.label) != -1){
          this.checkColumns.splice(this.checkColumns.indexOf(data.label),1)
        }
      }
    },
  }
}
</script>

<style scoped>
.p{
  display: flex;
}
.p1{
  width: 80%;
}

</style>