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

本文介绍了如何在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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值