2021-10-19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.app {
width: 780px;
margin: 100px auto 0;
}
</style>
</head>
<body>
<div class="app">
<el-table border :data="tableData" style="width: 100%" height="250">
<el-table-column v-for="(item,index) in tableHeader" v-if="colData[index].isshow" :key="item.key"
:fixed="colData[index].islock" min-width="200" :label="item.label" :prop="item.key">
</el-table-column>
</el-table>
<div>
<el-row type="flex" class="row-bg">
<el-col v-for="(c,index) in colData">
<el-button @click="showtt(index)">{{c.isshow?'不显示':'显示'}}</el-button>
<el-button @click="locktt(index)">{{c.islock?'解锁':'加锁'}}</el-button>
<div>{{c.title}}</div>
</el-col>
</el-row>
</div>
</div>
<script>
var vm = new Vue({
el: '.app',
data() {
return {
colData: [{
title: '日期',
isshow: true,
islock: true,
},
{
title: '姓名',
isshow: true,
islock: false,
},
{
title: '省份',
isshow: true,
islock: false,
},
{
title: '市区',
isshow: true,
islock: false,
},
{
title: '地址',
isshow: true,
islock: false,
},
{
title: '邮编',
isshow: true,
islock: false,
}
],
tableHeader: [{
label: '日期',
key: 'date'
},
{
label: '姓名',
key: 'name'
},
{
label: '省份',
key: 'province'
},
{
label: '市区',
key: 'city'
},
{
label: '地址',
key: 'address'
}, {
label: '邮编',
key: 'zip'
}
],
tableData: [{
date: '2016-05-03',
name: '1王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '2小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '3虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '4王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '5王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '6王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
}
},
mounted: function () {
// this.tableData="";
},
methods: {
showtt: function (index) {
this.colData[index].isshow = !this.colData[index].isshow
},
locktt: function (index) {
this.colData[index].islock = !this.colData[index].islock
},
}
})
</script>
</body>
</html>
