【Vue】求教，如何实现可以直接在element表格上勾选多选框，然后点击保存提交数据

【Vue】求教，如何实现可以直接在element表格上勾选多选框，然后点击保存提交数据
如图所示，要实现可以在表格上直接勾选多选框，然后点击保存，将数据提交到后台。

现在有一个问题，表格数据tableData如果是我自己在data中写死的，那么可以实现在表格上直接勾选多选框。tableData从后台获取到的话，在表格上点不了，不能勾选多选框了。请问如何解决？？？

代码部分：

                   <el-table :data="authData"
class="tb-edit"
border
style="width: 100%">
<el-table-column prop="number" label="序号" align="center" width="260px"></el-table-column>
<el-table-column label="状态" prop="status" align="center">
<template slot-scope="scope">
<template v-if="scope.row.status==1">
<span>正常</span>
</template>
<template v-else>
<span>异常</span>
</template>
</template>
</el-table-column>
<el-table-column prop="checkedAuthor"  label="权限" width="750px" align="left">
<template scope="scope">
<el-checkbox-group v-model="scope.row.ishas">
<el-checkbox v-for="city in scope.row.checkList" :label="city" :key="city" size="mini">{{city}}</el-checkbox>
</el-checkbox-group>
</template>
</el-table-column>
<el-table-column prop="people" label="责任人" align="center"></el-table-column>
<el-table-column label="操作" width="180px" align="center">
<template slot-scope="scope">
<el-button title="保存" type="primary" size="mini" @click.stop="handleEditAuth(scope.row)">保存</el-button>
</template>
</el-table-column>
</el-table>

data中定义：

                authData:[{
number:1,
status:1,
ishas:["一楼灯控","一楼保温箱"],
checkList:["一楼灯控","一楼保温箱","走道灯控"],
people:'陆之然'
}
],//权限数据

回答

请贴出获取到的数据结构

以上是 【Vue】求教，如何实现可以直接在element表格上勾选多选框，然后点击保存提交数据 的全部内容， 来源链接： utcz.com/a/78283.html

回到顶部