标签：false name elementUI 普陀区 表头 label sertg selectionArr table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>elementUI table 组件动态多选表头</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="public/vue.min.js"></script>
<link rel="stylesheet" href="public/element/index.css">
<script src="public/element/index.js"></script>
</head>
<body>
<div id="app">
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选
</el-checkbox>
<el-checkbox-group v-model="checkedOptions" @change="handleCheckedChange">
<el-checkbox v-for="item in tableTitleList" :key="item.prop" :label="item.label" v-model="item.isShow">
</el-checkbox>
</el-checkbox-group>
<el-table :data="tableData" border style="width: 100%">
<el-table-column v-for="column in selectionArr" :fixed="column.fixed" :prop="column.prop" v-if="column.isShow"
:label="column.label" :width="column.width">
<template slot-scope="scope">
<el-row @click.native="clickChange(scope.$index)">asd</el-row>
</template>
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
checkAll: false, // 全选
checkedOptions: [], // 单选按钮
allElection: [], // 全选数组
selectionArr: [], // 选中的数据
tableTitleList: [{
fixed: true,
prop: "date",
label: "日期",
widthEnable: false,
isShow: true,
width: "150"
},
{
prop: "name",
label: "姓名",
widthEnable: false,
isShow: true,
width: "120",
},
{
prop: "province",
label: "省份",
widthEnable: false,
isShow: true,
width: "120",
},
{
prop: "city",
label: "市区",
widthEnable: false,
isShow: true,
width: "120",
},
{
prop: "address",
label: "地址",
widthEnable: false,
isShow: true,
width: "auto",
},
{
prop: "zip",
label: "邮编",
widthEnable: false,
isShow: true,
width: "auto",
},
],
tableData: [{
date: '2016-05-02',
name: '王小虎1',
province: '上海',
city: '普陀区',
list: [{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
],
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎2',
province: '上海',
city: '普陀区',
list: [{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
],
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎3',
province: '上海',
list: [{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
],
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎4',
province: '上海',
list: [{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
{
name: "sertg"
},
],
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}],
}
},
mounted() {
this.allChecked();
this.defaultCheckSelection();
},
methods: {
clickChange(index) {
console.log(index)
},
defaultCheckSelection() { // 初始化 默认全部选中
this.checkedOptions = this.allElection;
let checkedCount = this.checkedOptions.length;
this.checkAll = checkedCount === this.tableTitleList.length;
this.getChecked(this.checkedOptions);
},
allChecked() { // 全选数组
this.allElection = [];
for (var i = 0; i < this.tableTitleList.length; i++) {
this.allElection.push(this.tableTitleList[i].label) //label为数据里唯一值，可替换
}
},
getChecked(selectionArr) { // 获取选中的对象
this.selectionArr = [];
for (var i = 0; i < this.tableTitleList.length; i++) {
for (var j = 0; j < selectionArr.length; j++) {
if (selectionArr[j] === this.tableTitleList[i].label) { //label为数据里唯一值，可替换
this.selectionArr.push(this.tableTitleList[i])
}
}
}
},
handleCheckAllChange(val) { // 全选
this.allChecked();
this.checkedOptions = val ? this.allElection : [];
this.cancelAll = false;
this.getChecked(this.checkedOptions);
console.log(this.selectionArr)
},
handleCheckedChange(value) { // 单个选中
let checkedCount = value.length;
if (checkedCount === this.tableTitleList.length) {
this.checkAll = true
this.cancelAll = false
} else {
this.checkAll = false
this.cancelAll = false
}
this.getChecked(value);
console.log(this.selectionArr)
}
}
})
</script>
</body>
</html>
标签：false,name,elementUI,普陀区,表头,label,sertg,selectionArr,table 来源： https://www.cnblogs.com/JaneLifeBlog/p/16427561.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。