最终效果如下

页面只需要设置两个参数(适用于element及antd)

columnSetting // 是否显示列设置按钮
// name="TtableColumnSet" // 区分储存本地表头数据（保证其唯一性）
无需name属性来确定唯一性（内置md5唯一，确保prop不可重复）

一、element具体代码如下

1、html（新建一个columnSet.vue页面）

<template><el-dropdown trigger="click" placement="bottom"><el-button icon="el-icon-s-operation" size="small">列设置</el-button><el-dropdown-menu divided slot="dropdown"><span class="title">列设置</span><draggable class="t_table_column_setting_dropdown" v-model="columnSet"><el-checkboxv-for="(col, index) in columnSet":key="col.prop"@click.native.stop:checked="!col.hidden":disabled="col.checkBoxDisabled"@change="checked => checkChanged(checked, index)">{{ col.label }}</el-checkbox></draggable></el-dropdown-menu></el-dropdown>
</template>

2、js

<script>
import draggable from 'vuedraggable'export default {name: 'ColumnSet',components: {draggable},props: {columns: {type: Array,default: () => []},title: {type: String,default: ''},name: {type: String,default: ''}},data () {const columnSet = this.getColumnSetCache()this.$emit('columnSetting', columnSet)return {columnSet}},watch: {columnSet: function (n) {this.$emit('columnSetting', n)localStorage.setItem(`t-ui:TTable.columnSet-${this.name || this.title}`, JSON.stringify(n))}},methods: {getColumnSetCache () {const value = localStorage.getItem(`t-ui:TTable.columnSet-${this.name || this.title}`)return value ? JSON.parse(value) : this.initColumnSet()},initColumnSet () {const columnSet = this.columns.map((col, index) => ({label: col.label,prop: col.prop,hidden: false,checkBoxDisabled: false}))return columnSet},checkChanged (checked, index) {this.$set(this.columnSet, index, { ...this.columnSet[index], hidden: !checked })let obj = {}this.columnSet.map(val => {val.hidden in obj || (obj[val.hidden] = [])obj[val.hidden].push(val.hidden)})if (obj.false.length < 2) {this.columnSet.map((val, key) => {if (!val.hidden) {this.$set(this.columnSet, key, { ...this.columnSet[key], checkBoxDisabled: true })}})} else {this.columnSet.map((val, key) => {if (!val.hidden) {this.$set(this.columnSet, key, { ...this.columnSet[key], checkBoxDisabled: false })}})}}}
}
</script>

3、scss

<style lang="scss" scoped>
.el-dropdown-menu {padding: 15px;font-size: 14px;.title {font-weight: bold;}::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {color: #262626;}.t_table_column_setting_dropdown {display: flex;flex-direction: column;max-height: 300px;overflow-y: auto;}
}
</style>

4、关于插件vuedraggable（为了方便antd），其实element可以用el-tree代替拖动

主要是：elementUI给了一个自定义节点的插槽，而antd没有，需要增加许多操作，才能满足
故：用了这个第三方插件

如何引入在table组件中

 <!--列设置按钮--><column-setv-if="columnSetting"v-bind="$attrs":columns="columns"@columnSetting="v => columnSet = v"/>

计算属性中需要添加以下代码

 computed: {columnByProp () {return this.columns.reduce((acc, cur) => {acc[cur.prop] = curreturn acc}, {})},renderColumns () {return this.columnSet.length > 0 ? this.columnSet.reduce((acc, cur) => {if (!cur.hidden) {acc.push(this.columnByProp[cur.prop])}return acc}, []) : this.columns}

最终Element table组件如图所示

二、antd具体代码

1、跟element一样只是table的column的参数不一样

elementUi的columns配置是{prop: ‘name’, label: ‘姓名’}

antdUi的columns配置是{dataIndex: ‘name’, title: ‘姓名’}

2、把el标签改成a开头

三、组件地址

gitHub组件地址

gitee码云组件地址

ElementUI table组件二次封装文档

antdUI table组件二次封装文档

vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )相关推荐

vue表格某一列的显示与隐藏
先看运行结果: 初始是默认为显示全部信息: 点击隐藏,结果如下图: 完整代码如下:(表格数据:https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe ...
JavaScript动态设置table的高度
这两天在调测系统的兼容性时遇到一个设置table高度的问题,页面功能很简单,就是页面中央一个文件,文件下方有一个保存按钮,文件内可以点击"添加项目按钮"来在该文件内增加表格数(这就 ...
DevExpres表格控件运行时动态设置表格列
本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
Vue动态设置Style属性
Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style :style="{ color:domain.groups == 1? '#ccc': dom ...
vue 动态设置组件高度_高度动态的Vue明星评分组件
vue 动态设置组件高度虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars ratin ...
Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
jquery控制table的行显示和隐藏
jquery控制table的行显示和隐藏一.开发记录我们经常会遇到需要在html中控制元素进行隐藏或显示的场景: 隐藏: $('#id').css('display','none'); 显示: $ ...

vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )

最终效果如下

页面只需要设置两个参数(适用于element及antd)

一、element具体代码如下

1、html（新建一个columnSet.vue页面）

2、js

3、scss

4、关于插件vuedraggable（为了方便antd），其实element可以用el-tree代替拖动

如何引入在table组件中

最终Element table组件如图所示

二、antd具体代码

1、跟element一样只是table的column的参数不一样

2、把el标签改成a开头

三、组件地址

vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )相关推荐

最新文章

热门文章