elementui动态设置el-table表头 并记住选择

HTML部分

el-table ref="table" :data="productList" style="width: 100%;" highlight-current-row
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" fixed="left"></el-table-column>
            <el-table-column v-for="(item,index) in defaultColumns" :key="index"
                            show-overflow-tooltip
                            :prop="item.prop" :label="item.label" :width="item.width"
                            :min-width="item.minWidth? item.minWidth : '120'"
                            v-if="item.isChecked===true">
                <!---如果没有需要特殊处理的字段 就不必添加scope--->
                <template slot-scope="scope">
                    <div v-if="item.type === 'text'">
                    <!---显示对应的字段值--->
                        {{ scope.row[item.prop]}}
                    </div>
                    <div v-if="item.type === 'date'">
                    <!---需要特殊处理的字段--->
                        {{ scope.row.createTime}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="220">
                <template slot-scope="scope">
                    <el-button type="text" @click="view(scope.row)">
                        查看
                    </el-button>
                    <el-button type="text" >
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div >
            <el-tooltip class="item" effect="dark" content="Column Settings"
            placement="top" style="border:1px solid">
                <el-popover placement="bottom" title="Column Display" 
                                width="500" trigger="click">
                    <div v-for="item in defaultColumns" :label="item" 
                            :key="item.prop" class="columns" style="display: inline-block">
                        <el-checkbox  v-model="item.isChecked"  @change="changeColumns">    
                            {{item.label}}
                        </el-checkbox>
                    </div>
                    <el-button type="text" style="margin: 0 10px;font-size: 20px;"
                    slot="reference">
                    <i class="el-icon-setting"></i></el-button>
                </el-popover>
            </el-tooltip>
        </div>

js部分 注意：data定义中defaultColumns部分健值对没有设置，有需要的按需设置即可

prop的value值要与接口返回循环在el-table中绑定的prop一致

只需要把动态设置的字段放在defaultColumns中即可

data: function(){
                return {
                    productList: [
                        {sku: '111',productNo: '1',customerProductNo: '1', 
                        name: '1', englishName: '1', createTime: '2020-10-10T14:32:12'},
                        {sku: '222',productNo: '222',customerProductNo: '222', 
                        name: '222', englishName: '222', createTime: '2021-11-10T11:32:12'},
                    ],
                    multipleSelection: [],//checkbox选中的数据
                    /**
                     * 列表所有显示列
                     * @label 列名称
                     * * @prop 列值 注意 要与接口字段显示的key值一致
                     * @type 列类型（文本，链接，日期）如有需要特殊处理的字段可加type进行判断注意不要用string、Number这种js类型去定义
                     * @minWidth 列最小宽度
                     * @width  列宽度
                     */
                    defaultColumns: [
                        {label: 'SKU', prop: 'sku', type: 'text', isChecked: true},
                        {label: ' 产品编号', prop: 'productNo', type: 'string', isChecked: true},
                        {label: '客户产品编号', prop: 'customerProductNo', type: 'string', isChecked: true},
                        {label: '中文名称', prop: 'name', type: 'string', isChecked: true},
                        {label: '英文名称', prop: 'englishName', type: 'string', isChecked: true},
                        {label: '产品标签', prop: 'productLabel', type: 'string', isChecked: true},
                        {label: '物流标签', prop: 'logisticsLabel', type: 'string', isChecked: true},
                        {label: '产品分类', prop: 'productClassify', type: 'string', isChecked: true},
                        {label: '销售', prop: 'salesman', type: 'string', isChecked: true},
                        {label: '采购', prop: 'buyer', type: 'string', isChecked: true},
                        {label: '贸易方式', prop: 'tradeMode', type: 'string', isChecked: true},
                        {label: '单位', prop: 'unit', type: 'string', isChecked: true},
                        {label: '产品形态', prop: 'productForm', type: 'string', isChecked: true},
                        {label: '退税率', prop: 'taxRate', type: 'string', isChecked: true},
                        {label: '包装', prop: 'packing', type: 'string', isChecked: true},
                        {label: '备注', prop: 'remark', type: 'string', isChecked: true},
                        {label: '成分', prop: 'component', type: 'string', isChecked: true},
                        {label: '创建时间', prop: 'createTime',  type: 'date', isChecked: true},
                        {label: '创建者', prop: 'createdBy', type: 'string',  isChecked: true},
                        {label: '更新人', prop: 'updatedBy',  type: 'string', isChecked: true},
                        {label: '更新时间', prop: 'updateTime', type: 'date', isChecked: true},
                    ],
                }
            },
            mounted: function () {
            // 首次进入页面时查找local中是否有存储的显示列
                var str = localStorage.getItem('selectColumns');
                if (localStorage.getItem('selectColumns')!== null) {
                    this.defaultColumns = JSON.parse(str);
                }
            },
            methods:{
                // 列表checkbox选中or取消时触发
                handleSelectionChange: function (val) {
                    this.multipleSelection = val;
                },
                // 更改表格的显示列时存储到location中
                changeColumns: function () {
                    localStorage.setItem('selectColumns',JSON.stringify(vm.defaultColumns));
                },
                // 操作按钮
                view(row) {
                    console.info('row', row);
                }
            }

 效果图如下：