element-ui table & checkbox

element-ui table中嵌套el-checkbox实现权限界面控制

by Towry Wang

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
   <el-table :data="list" v-loading="false" element-loading-text="给我一点时间" border fit highlight-current-row
                  style="width: 100%">
            <!-- 用户 -->
            <el-table-column min-width="150px" align="center" :label="角色">
                <template slot="header">
                  <el-checkbox v-model="all">全选</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <!-- 遍历权限组 -->
            <el-table-column min-width="150px" align="center" :label="item.name" :key="item.id"
                             v-for="item in tableHead">
                <template slot-scope="scope">
                    <!--{{scope.row.roles}}-->
                    <!-- 遍历用户权限  问题在这里：怎么通过scope.row.roles控制el-checkbox的选中状态-->
                    <!--<el-checkbox :checked="scope.row.roles.indexOf(item.id)!==-1"/>-->
                    <el-checkbox :checked="scope.row.roles.includes(item.id)"/>
                </template>
            </el-table-column>
        </el-table>
        
        <p>
          上面左上角全选点击无效.
        </p>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

JavaScript

var Main = {
  data() {
      return {
      		all: false,
      		list: [
            {id: 1, name: "曾与", roles: [1,2,3,4]},
            {id: 2, name: "念慈", roles: [5,6]},
            {id: 3, name: "悟净", roles: [4,5,6]},
            {id: 4, name: "八戒", roles: [3,4,5,6]},
            {id: 5, name: "猴头", roles: [1,5,6]},
            {id: 6, name: "佛祖", roles: [1,2]}
          ], // 用户列表 roles里的数组对应此用户拥有的权限id
      		tableHead: [
          	{id: 1, name: "用户管理权限"},
            {id: 2, name: "设备管理权限"},
            {id: 3, name: "素材管理权限"},
            {id: 4, name: "节目审核权限"},
            {id: 5, name: "节目发布权限"},
            {id: 6, name: "节目编辑权限"}
          ], // 权限列表
          checked: true
      }
    },
    created() {
    	
    },
    methods: {
      
   }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')