AVUE 获取显隐列字段

本文介绍如何在Avue框架中实现导出功能时,确保导出的字段与前台显示的结果保持一致的方法。通过获取显隐列的字段信息,满足业务需求。

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

近期在需要做一个导出功能,业务人员希望,导出的字段和前台显示的结果一致,故而需要获取显隐列的字段信息;

很遗憾在avue的官方文档中并没有直接找到对应的信息;找了好久才找到,记录一下。

<avue-crud ref="crud" :data="dataList" :option="option" :summary-method="getSummaries"
           :show-column.sync="showColumn" :table-loading="loading" :page.sync="page" @on-load="onLoad">
</avue-crud>

--方法

onLoad(){

    console.log("显示字段:", this.$refs.crud.$refs.dialogColumn.showColumn)

}

### element-ui 表格列示和藏方法 在 `element-ui` 中,可以通过控制表格列的属性来实现列的示和藏。具体来说,可以为每一列设置一个布尔类型的 `show` 属性,在渲染表格时通过过滤器只保留那些 `show` 值为 `true` 的列。 对于表格列的管理,通常会在 Vue 组件的数据部分定义一个数组 `tableColumns` 来存储各列的信息,其中包括每列的名字、宽度以及是否可见的状态等配置项[^1]。当用户改变某列的可见状态时,则更新对应对象中的 `show` 字段值;之后重新计算并返回新的列列表给到 `el-table-column` 使用[^3]: ```javascript computed: { visibleColumns() { return this.tableColumns.filter((column) => column.show); } } ``` 为了提供更友好的用户体验,可以在界面上添加一些开关按钮让用户自行决定哪些列应该被呈现出来。这些控件能够触发相应事件去修改上述提到的 `show` 参数从而达到即时生效的效果。 另外值得注意的是,如果希望保存用户的偏好设定以便下次访问时保持一致,还需要考虑如何持久化这部分数据,比如利用浏览器本地存储机制 localStorage 或 sessionStorage 实现简单版本的功能。 #### 示例代码 下面是一个简单的例子展示了怎样创建具有示/藏特性的自定义表头: ```html <template> <div> <!-- 列选择区域 --> <el-checkbox-group v-model="selectedColumnKeys"> <el-checkbox v-for="(col, index) in allColumns" :key="index" :label="col.prop">{{ col.label }}</el-checkbox> </el-checkbox-group> <!-- 数据表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="(item,index) in filteredColumns" :key="index" :prop="item.prop" :label="item.label"></el-table-column> </el-table> </div> </template> <script> export default { data () { return { selectedColumnKeys: [], // 用户选择了哪些列 allColumns: [ { prop: 'date', label: '日期' }, { prop: 'name', label: '姓名' }, { prop: 'address', label: '地址'} ], tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, /* ... */ ] }; }, computed: { filteredColumns(){ let self = this; return this.allColumns.filter(function (item){ return self.selectedColumnKeys.indexOf(item.prop)!== -1 ; }); } } }; </script> ``` 此示例中,`allColumns` 数组包含了所有的可能列选项及其标签名称,而 `filteredColumns` 计算属性则负责依据当前已选中的键名(`selectedColumnKeys`) 进行筛选得到最终实际会渲染出来的那一部分内容。最后再配合上 Element UI 提供的基础组件完成整个交互逻辑的设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值