ElementUI复选框el-checkbox的默认选中问题

Question

ElementUI复选框el-checkbox的默认选中问题

Wister_記

8136

发布于
2019-12-02

问题描述

RT，还是最近在做的项目，权限管理模块，要做成这个样子，table 列也要动态渲染的这种（下图）；
第一次做这种权限控制，一个头两个大，萌新攻城狮求大狮子帮助！！！

效果.png

点击列表的配置按钮会弹一个框框，这个框框就这样子的，是一个用trreTable来实现的界面，请求回来的数据是0和1（1表示启用即勾选，反之0表示不启用则不勾选），数据已经渲染好了，渲染一下看看（下图）

这样看的话感觉值没有问题，这个框框就是选不起来，下面我放代码

相关代码

组件代码

<el-table
  :tree-props="treeOption"
  :data="tableData"
  row-key="id"
  fit
>
  <!-- 渲染列 -->
  <el-table-column
    v-for="(item, index) in tableLabel"
    :fixed="index == 0? 'left':false "
    :width="index == 0? '180':'' "
    :key="index"
    :prop="item.prop"
    :label="item.name"
  >
    <template slot-scope="scope">
      <!-- 功能名称 -->
      <div v-if="index == 0">{{ scope.row.name }}</div>
      
      <!-- 功能项 -->
      <el-checkbox
        v-else
        :disabled="scope.row[item.prop]==undefined? true:false"
        :v-model="scope.row[item.prop]"
        @change="scope.row[item.prop]==1? 0:1"
      />
      
    </template>
  </el-table-column>

  <el-table-column label="是否启用">
    <template slot-scope="scope">
      <el-checkbox @change="checkRow(scope.row)" />
    </template>
  </el-table-column>

  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button
        :disabled="scope.row.is_edit!=1?true:false"
        @click="optionDialog(scope.row.id)"
      >配 置</el-button>
    </template>
  </el-table-column>

</el-table>

数据

// table 列数据（表头）
tableLabel: [
    { name: "功能名称", prop: "name" },
    { name: "添加", prop: "is_add" },
    { name: "修改", prop: "is_edit" },
    { name: "删除", prop: "is_del" },
    { name: "审核", prop: "is_audit" },
    { name: "打印", prop: "is_print" },
    { name: "导入", prop: "is_import" },
    { name: "导出", prop: "is_export" }
  ],
  
// table 表数据（片段）
tableData: [
    {
      id: 1,
      name: "基础模块",
      child: [
        {
          id: 3,
          name: "设置管理",
          child: [
            {
              id: 5,
              name: "辞典设置",
              is_add: 1,
              is_edit: 1,
              is_del: 1,
              is_audit: 1,
              is_print: 1,
              is_import: 1,
              is_export: 1
            }
          ]
        }
      ]
    }]

这个就是用表格来收集数据，其实开始用checked实现了默认选中，后面我想要通过勾选来改变表数据，但是没有实现