The table-columns-custom-tool's intro from xiaotianxia

table-columns-custom-tool's Introduction

说明：

一个长列表的自定义列工具。适用于vue和element-ui搭建的系统。

th、td属性：

alwaysShow 列一直显示，自定义列弹窗里不会出现

props:

related-table-class 要绑定的table的className
cache-name 用于存储已选列的索引值的localStorage名
render-by-class 通过数据列class名渲染，主要针对存在合并单元格的情况，这时default-checked传class名组成的数组
default-checked 数组，默认展示数据列的索引号或class名

使用

npm i table-columns-custom-tool

<el-button type="primary" size="small" @click="onCustomTable"><i class="el-icon-setting"></i></el-button>

...
<table>
...
</table>

...

<table-columns-custom 
    ref="tableCustomModal"
    related-table-class="js-list"
    :default-checked="[0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12]"
    cache-name="XX_XX_LIST_FIELDS">
</table-columns-custom>

import TableColumnsCustom from 'table-columns-custom-tool';

...

components: {
    TableColumnsCustom
},

methods: {
	getData () {
		getRemoteData.then(res => {
			this.list = res.list;
			//获取数据后，触发重新渲染表格
			this.$nextTick(() => {
		        this.$refs.tableCustomModal.init();
		    });
		});		
	},

	onCustomTable () {
		this.$refs.tableCustomModal.showModal();
	}
}