element table表格实现标题搜索列显示隐藏问题


一、table某一列如果要在条件下才能显示出来,可以这样写(我这里是用show来区分一开始是否在列表显示)

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
在computed中使用js的filter方法来筛选show为true的方法
在这里插入图片描述

二、接着是根据搜索条件来显示表格显示的问题

在这里插入图片描述
在contrastChange这个地方我把对应的值设置成true就好了,切记一定要set回去,要不然页面渲染拿到的值有可能会是undefined
在这里插入图片描述

budgetAmountService.contrast({ group_id: this.group_id, year: this.year, key: prop, contrast_year: totalYear }).then(res => {
        this.contrastList = res.data
        this.tableData.forEach((item, index) => {
          res.data.forEach(subItem => {
            if (subItem.id === item.id) {
              item = Object.assign(item, subItem)
              this.$set(this.tableData, index, item)  //这里要set回去,否则有可能会出现undefined的情况
            }
          })
        })
      })
      this.columnsData.forEach((column, index) => {
        if (column.prop.includes(`${prop}Contrast`)) {
          column.show = true
          column.totalYear = totalYear
        }
        if (column.prop === prop) {
          column.clearTitle = '清除筛选'
        }
      })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现 Element UI Table 的后端排序,需要在 Table 的属性中加入 `sort-method`,并且在该属性中指定一个排序方法。该方法会在 Table 排序时被调用,并且会将当前排序的信息作为参数传入。你可以在该方法中向后端发送请求,获取排序后的数据。 例如,我们可以定义一个 `handleSortChange` 方法来处理 Table 的排序事件: ```javascript handleSortChange(sort) { this.sortProp = sort.prop; this.sortOrder = sort.order; this.getData(); }, ``` 在 `getData` 方法中,我们可以向后端发送请求,获取排序后的数据: ```javascript getData() { // 向后端发送请求,获取排序后的数据 fetch('/api/data', { method: 'POST', body: JSON.stringify({ sortProp: this.sortProp, sortOrder: this.sortOrder, // 其他查询条件 }) }) .then(response => response.json()) .then(data => { this.tableData = data; }); }, ``` 对于显示隐藏功能,我们可以使用 Table 的 `show-header` 和 `show-summary` 属性来控制表头和总结行的显示,使用 Table 的 `prop` 属性来控制显示。 例如,我们可以定义一个 `columns` 数组来存储所有的信息: ```javascript columns: [ { prop: 'name', label: '姓名', visible: true }, { prop: 'age', label: '年龄', visible: true }, { prop: 'gender', label: '性别', visible: false }, { prop: 'address', label: '地址', visible: false }, { prop: 'phone', label: '电话', visible: true }, ], ``` 在 Table 中,我们可以使用 `v-for` 循环遍历 `columns` 数组,同时在每一的 `el-table-column` 上绑定 `v-if` 条件来控制显示: ```html <el-table :data="tableData" :show-header="showHeader" :show-summary="showSummary"> <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :visible="col.visible" v-if="col.visible"></el-table-column> </el-table> ``` 在组件中,我们可以使用一个 `toggleColumn` 方法来控制显示隐藏: ```javascript toggleColumn(prop) { const column = this.columns.find(col => col.prop === prop); column.visible = !column.visible; }, ``` 在模板中,我们可以使用 `el-switch` 控件来触发 `toggleColumn` 方法: ```html <div v-for="col in columns" :key="col.prop"> <el-switch v-model="col.visible" @change="toggleColumn(col.prop)">{{ col.label }}</el-switch> </div> ``` 这样,当我们点击开关时,就可以实现显示隐藏了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值