element表头宽度_element-ui el-table表头自定义配置，表格拖动排序

一 需求说明

表格列太多，页面展示不下，希望可以对表头自定义配置，配置是否展示，宽度，顺序等等。配置绑定用户。

二 需求开发

2.1在表头右侧添加按钮，使用caption元素，

createCaption() {

const caption = document.createElement('caption'); // 创建元素

caption.innerHTML = ''; // 图标样式

document.querySelector('table').appendChild(caption); // 选择table标签并添加caption

caption.addEventListener('click', () => { // 点击事件

this.setTableHead();

});

},

效果如下图：

2.2 点击弹窗展示设置页面

setTableHead() {

this.tableHeadsListCopy = _.cloneDeep(this.tableHeadsList); // this.tableHeadsList是从后端接口获取的表头数据

this.$refs.tableHead.isTableHead = true;

},

// tableHeadsList示例

tableHeadsList: [

{ width: 'auto', isShow: true, isA