SOURCE

console 命令行工具 X clear

                    
>
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");