image.jpeg
<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>
js
<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>
