element-ui table 表格組件實現剪切列效果

效果如下：

操作後效果：

1、HTML代碼：

<template>
	<div class="conter">
		<!-- 篩選列選項 -->
		<div class="filter-container">
            <el-checkbox-group v-model="formThead">
                <el-checkbox v-for="(item,index) in  col" :label="item.label" :key="index">
                    {{item.label}}
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- 表格信息 -->
		<el-table :data="tableData"
                  border
                  row-key="id"
                  align="left">
            <el-table-column v-for="(item, index) in formThead"
                             :key="index"
                             :label="item">
            </el-table-column>
        </el-table>
		
	</div>
</templat>

2、JS代碼：

<script>
export default {
 data() {
            return {
                col: [
                    {
                        label: '日期',
                        prop: 'date'
                    },
                    {
                        label: '姓名',
                        prop: 'name'
                    },
                    {
                        label: '地址',
                        prop: 'address'
                    },
                    {
                        label: '標籤',
                        prop: 'tag'
                    }
                ],
                tableData: [
                    {
                        name: 'fruit-1',
                        date: 'apple-10',
                        address: 'banana-10',
                        tag: 'orange-10'
                    },
                    {
                        name: 'fruit-2',
                        date: 'apple-20',
                        address: 'banana-20',
                        tag: 'orange-20'
                    }
                ],
                formThead: []
            }
        },
		mounted(){
            this. headTable()
        },
        methods:{
            //表頭處理
            headTable(){
                for(let i=0;i<this.col.length;i++){
                    this.formThead.push(this.col[i].label);
                }
            },
        }

}


</script>