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>

### 实现 Element Plus `el-table` 组件自适应高度 为了使 `el-table` 组件在不同屏幕尺寸下都能保持良好的用户体验并自动调整其高度,可以通过CSS样式控制以及父容器的高度管理来达成这一目标。 对于 `el-table` 而言,在设定高度属性的同时确保表头表尾固定不变是一个常见的需求。这通常涉及到为表格指定一个百分比形式的高度值,并保证该表格位于一个具有明确高度定义的父级元素内[^1]。 当希望 `el-table` 不仅能根据可用空间自动调整大小还能显示内部滚动条而不是触发整个页面滚动时,则需进一步配置父容器及其子元素的样式。具体做法是在包裹 `el-table` 的父组件中应用特定的 CSS 属性组合,比如使用 Flexbox 布局模型配合相对定位与溢出隐藏等技术手段[^2]。 此外,考虑到现代前端开发框架如 Vue 3 下的应用场景,还可以利用响应式设计原则结合 JavaScript 动态计算逻辑,使得表格不仅能在加载时正确渲染,也能随着窗口变化实时更新布局[^4]。 ```html <template> <div class="table-container"> <!-- 使用 el-card 或其他容器作为外层包装 --> <el-card :body-style="{ display: 'flex', flexDirection: 'column', height: '100%' }"> <el-table :data="dataTable" style="height: 100%;" border> <!-- 表格列定义 --> </el-table> </el-card> </div> </template> <style scoped> .table-container { /* 确保外部容器也有明确定义的高度 */ height: calc(100vh - 100px); /* 示例:减去顶部导航栏或其他固定部分占用的空间 */ } .el-card >>> .el-card__body { overflow-y: auto; } </style> ``` 上述代码片段展示了如何创建一个能够自适应浏览器视口高度并且带有内置滚动机制的 `el-table` 。这里的关键在于: - 外部容器(`.table-container`)被赋予了一个基于视窗单位 (`vh`) 计算得出的具体高度; - 内嵌卡片组件(`el-card`)采用Flexbox布局并将自身拉伸至填满剩余空间; - 表格本身设置了 `height: 100%` 来继承来自父节点的高度分配; 这样做既可以让表格内容超出可视区域时出现滚动条,又不会影响到整体页面结构,从而达到预期效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值