Vue+ElementUI 实现 动态调整表格列 显示隐藏&显示顺序 |
您所在的位置：网站首页 › column67列 › Vue+ElementUI 实现 动态调整表格列 显示隐藏&显示顺序 |
|
小知识，大挑战！本文正在参与「程序员必备小知识」创作活动 本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。 先来看一个需求 1.表格可多选 2.表格可排序 3.表格可拖动列宽 4.表格固定列和表头 5.表格列顺序可调整 6.表格列可隐藏或显示 7.表格设置需要实时保存 复制代码解决思路 其中[1、2、3、4 ] Element-UI table组件原生就支持的 [5] 列顺序可调整 可以通过 改变 el-table-column 的渲染顺序实现 [6] 可以通过控制 el-table-column 的展示与隐藏实现 [7] 将每次修改存至本地localStorage Table组件 地址：element.eleme.io/#/zh-CN/com… 上代码： 核心在于需要循环渲染 el-table-column 部分 列设置 列设置 {{ node.label }} {{ scope.row[item.prop] | clueType }} {{ scope.row[item.prop] | clueSource }} {{ scope.row[item.prop] | commonType }} {{ scope.row[item.prop] }} {{ scope.row[item.prop] }} 复制代码 注意事项1.控制el-table-column显示与隐藏使用v-show无效，需要使用v-if。 2.部分列需要使用过滤器 我这里使用了if做判断。 3.由于虚拟Dom算法导致有时表格并不会实时刷新，这里需要给table添加key值。 4.列设置中可上下拖动采用 Tree组件。 5.由于需要固定列和表头 每次获取到表格数据后，再给tableHight赋值。 const winHeight = document.body.clientHeight // 窗口大小 - 表格顶部高度 this.tableHeight = winHeight - 260 复制代码6.这里由于给row绑定了click事件，需要给row中的Button按钮添加.native修饰，防止事件冒泡添加.stop修饰。 部分 export default { data() { // 表格key tableKey: 1, // 表格数据 tableData: [], // 默认表格高度 tableHeight：600， // 表格展示项配置 columns：[ { prop: 'name', // 对应列内容的字段名 label: '姓名', // 显示的标题 width: 66, // 对应列的宽度 resizable: true, // 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） show: true, // 展示与隐藏 sortable: false // 对应列是否可以排序 }, { prop: 'clue_type', label: '线索类型', width: 78, resizable: true, show: true, sortable: false }, // ... 省略部分字段 ], // 列设置中 tree配置 defaultProps: { children: 'children', label: 'label' } }, mounted(){ this.init() }, methods: { init() { // 判断本地是否有表格配置数据 ？ 加载 ： 忽略 // 获取表格数据 // 重设表格高度 }, allowDrop(draggingNode, dropNode, type) { // 仅允许Tree节点上下拖动 return type !== 'inner' }, // Tree 拖动时更新表格 handleDrop() { this.tableKey++ // 保存表格配置 this.saveTableColumns() }, // 重置表格列设置 resetTable() { // ... 忽略 }, // 显示隐藏切换 && 保存表格配置 saveTableColumns() { // setStorage 封装了 localStorage setStorage('clueTable', this.columns) }, // 选中表格行 handelTableClick(row) { // ... 省略业务逻辑 }， // table多选操作 handleSelectionChange(val) { // ... 省略业务逻辑 }， // 表头拖动事件 surverWidth(newWidth, oldWidth, column, event) { this.columns = this.columns.map(v => { if (v.prop === column.property) v.width = newWidth return v }) this.saveTableColumns() }, // 关注与编辑操作 clueTableRowClick(val, type) { // ... 省略业务逻辑 } } } 复制代码
以上就是该需求的简单实现。 END 「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |