admin-fiveFollowing/src/views/systemManage/rolePermission/roleInfoCom/index.vue

<template>
  <div class="siteManage-main roleInfoPage">
    <el-table :data="tableData" border stripe :cell-style="cellStyle">
      <el-table-column prop="xuhao" label="序号" width="80" ></el-table-column>
      <el-table-column prop="menu" label="菜单" width="180" ></el-table-column>
      <el-table-column prop="authority" label="权限"  class="roleLeft">
        <template #default="scope">
          <el-checkbox
            v-for="item in scope.row.authority"
            :label="item.name"
            :key="item.actionid"
            v-model="item.checked"
          ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'RoleInfoCom',
  data() {
    return {
      checked1: true,
      checked2: true,
      tableData: [
        {
          xuhao: '1',
          menu: '首页',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true}],
        },
        {
          xuhao: '2',
          menu: '站点概览',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true}],
        },
        {
          xuhao: '3',
          menu: '配电系统图',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true}],
        },
        {
          xuhao: '4',
          menu: '事件告警报表',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '告警处理', checked: true}],
        },
        {
          xuhao: '5',
          menu: '告警管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '告警处理', checked: true}],
        },
        {
          xuhao: '6',
          menu: '站点管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
        },
        {
          xuhao: '7',
          menu: '台区管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
        },

        {
          xuhao: '8',
          menu: '设备管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
        },
        {
          xuhao: '9',
          menu: '数据管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '导出', checked: true}],
        },
        {
          xuhao: '10',
          menu: '电能质量',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true}],
        },
        {
          xuhao: '11',
          menu: '月度报告',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '导出', checked: true},{name: '编辑模板', checked: true}],
        },
        {
          xuhao: '12',
          menu: '计划停电',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
        },
        {
          xuhao: '13',
          menu: '巡检管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '删除', checked: true},{name: '巡检处理', checked: true}],
        },
        {
          xuhao: '14',
          menu: '运维管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true}],
        },
        {
          xuhao: '15',
          menu: '工单管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true},{name: '工单处理', checked: true}],
        },
        {
          xuhao: '16',
          menu: '用户管理',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
        },
        {
          xuhao: '17',
          menu: '角色权限',
          authority: [{name: '全选', checked: true},{name: '查看', checked: true},{name: '编辑', checked: true},{name: '新增', checked: true},{name: '删除', checked: true}],
        },
      ],
    }
  },
  methods: {
    //自定义列样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      row, column, rowIndex
      if (columnIndex==2) {
        // return `text-align:left!important;cursor:pointer`
      }
    },
  },
}
</script>
<style  lang="scss">

</style>