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經常使用場景，能夠盡情使用