console
var Main = {
data() {
return {
options: [
{
label: '管理后台',
name: 'admin',
id: 1,
edit: 1,
check: 1,
show: 1,
aviable: 1
},
{
label: '基础信息',
name: 'base',
id: 2,
edit: 0,
check: 1,
show: 0,
aviable: 0
}
],
selectedOptions: []
};
},
methods: {
handleSelectionChange(val) {
if(val.length) {
this.options.forEach(item => {
this.$set(item, 'show', 1);
this.$set(item, 'edit', 1);
this.$set(item, 'check', 1);
this.$set(item, 'aviable', 1);
})
}else {
this.options.forEach(item => {
this.$set(item, 'show', 0);
this.$set(item, 'edit', 0);
this.$set(item, 'check', 0);
this.$set(item, 'aviable', 0);
})
}
},
rightSelected(item) {
if(item.show) {
this.$set(item, 'edit', 1);
this.$set(item, 'check', 1);
this.$set(item, 'aviable', 1);
}else {
this.$set(item, 'edit', 0);
this.$set(item, 'check', 0);
this.$set(item, 'aviable', 0);
}
},
test() {
console.log(this.options);
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.6/lib/index.js"></script>
<div id="app">
<el-table
:data="options"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="100">
<template slot-scope="scope">
<el-checkbox @change.native="rightSelected(scope.row)" :false-label="0" :true-label="1" v-model="scope.row.show">{{ scope.row.label }}</el-checkbox>
</template>
</el-table-column>
<el-table-column
label="权限类目">
<template slot-scope="scope">
<el-checkbox :false-label="0" :true-label="1" v-model="scope.row.edit">编辑</el-checkbox>
<el-checkbox :false-label="0" :true-label="1" v-model="scope.row.check">查看</el-checkbox>
<el-checkbox :false-label="0" :true-label="1" v-model="scope.row.aviable">可用</el-checkbox>
</template>
</el-table-column>
</el-table>
<el-button @click="test">测试</el-button>
</div>
@import url("//unpkg.com/element-ui@2.3.6/lib/theme-chalk/index.css");