"自定义显示列"的按钮实现

StaceyChen

数据表格的列有些多，我创建了一个"自定义显示列"的按钮，请问该如何实现？

admin已获得悬赏 200 威望

最佳答案

• admin
• 发表于2023-04-10
• 详细答案 >

admin

可以实现：
1. 弹窗里放一个checkbox多选组件，在弹窗Opened事件中获取数据表格的全部列，做checkbox组件的显示初始化；
2. 获取数据表格的全部列调用getTableColumns()方法；
3. 动态设置数据表格的显示列调用setTableColumns()方法，具体方法的使用查一下VForm文档。

StaceyChen

我的弹出窗口的opened事件响应函数体是这样的：
// extraData是this.getWidgetRef('datatable_cfg')
const dt_widget = this.extraData
const columns = dt_widget.getTableColumns()
this.getWidgetRef('checkbox_custom_cols').loadOptions(columns)

这样运行后，默认所有选项都没有被选中。勾选其中一个选项，所有选项都会被同时勾选上。请问应该怎么解决？

admin

StaceyChen 发表于 2023-4-10 13:08
我的弹出窗口的opened事件响应函数体是这样的：
// extraData是this.getWidgetRef('datatable_cfg')
const  ...

这么做，肯定有问题，思路不对。

admin

1. const columns = dt_widget.getTableColumns()
   
2. let columnOptionItems = []
   
3. columns.map(col => {
   
4.   columnOptionItems.push({
   
5.     label: col.label,
   
6.     value: col.prop
   
7.   })
   
8. })
   
9. this.getWidgetRef('checkbox_custom_cols').loadOptions(columnOptionItems)

复制代码

StaceyChen

我想实现它加载选项后自动选中某些选项，您告诉我使用setValue()。我多次尝试后没有效果，就打印了this.getWidgetRef('checkbox_custom_cols').getValue()，是[{0: 5}]。请指教如何实现选项自动选中

admin

StaceyChen 发表于 2023-4-10 16:26
我想实现它加载选项后自动选中某些选项，您告诉我使用setValue()。我多次尝试后没有效果，就打印了this.get ...

应该这样赋值：
setValue([1,2,3,4,5])

上面1、2、3这些是举例，实际上应该传每个选项的value值。