elemnt-ui table组件的标题可选方案

前几天在使用element-ui组件的时候有一个需求比较特别，就是table组件使用时列数太多，显示的时候须要左右拉动才能显示全，那就只有一个方法能够解决此问题，那就是将table的列可选；but官网木有此项，如何办？活人还能被尿憋死吗，在官方基础上本身造。

---

将官方的例子改造，每列选项属性组成集合循环，而不是一一设置，demo顶千言。直接上例子

<template>
<el-row :gutter="3">
    <el-col :span="4" v-for="col in cols" :key="col.prop">
        <el-switch v-model="col.is_show"></el-switch>{{col.label}}
    </el-col>
</el-row>
<el-table v-loading.body="loading" :data="tableData" stripe style="width: 100%;margin-top: 10px" @selection-change="handleSelectionChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column type="index"></el-table-column>
        <template v-for="col in cols" v-if="col.is_show">
            <el-table-column v-if="col.type==='normal'" sortable :prop="col.prop" :label="col.label" :key="col.prop"></el-table-column>
            <el-table-column v-if="col.type==='sort' & col.prop!=='operate'" :label="col.label" :key="col.prop" fixed="right">
                <template slot-scope="scope">
                    <el-tag type="primary" v-if="col.prop==='verif_img'"><img :src="scope.row.verif_img" style="width:60px;height:20px"/></el-tag>
                </template>
            </el-table-column>
            <el-table-column v-if="col.prop==='operate'" :label="col.label" :key="col.prop">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </template>
</el-table>      
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            cols:[
                {type:'normal', is_show:true , prop: 'date', label: '日期'},
                {type:'normal', is_show:true , prop: 'name', label:'姓名'},
                {type:'normal', is_show:true , prop: 'age',  label:'年龄'},
                {type:'normal', is_show:false, prop: 'address', label:'地址'},
                {type:'sort'  , is_show:false, prop: 'verif_img', label:'验证图'},
                {type:'normal', is_show:false, prop: 'verif_result', label:'登陆验证'},
                {type:'sort'  , is_show:true , prop: 'operate', label: '操做'}
            ],
            tableData: [{id: 1,date:'2017-11-22', name:'张三', age:12, address:'上海市杨浦区五角场', verif_img:'http://on90cf3na.bkt.clouddn.com/17-11-26/397343.jpg', verif_result:'2907'},
            {id: 2,date:'2017-11-23', name:'李四', age:13, address:'上海市杨浦区江湾体育场', verif_img:'http://on90cf3na.bkt.clouddn.com/17-11-26/397343.jpg', verif_result:'2971'}]
        }
    },
    methods:{
        handleSelectionChange(val){

        },
        handleEdit(id){

        }
    }
}
</script>

上面例子基本涵盖table经常使用场景，能够尽情使用