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

发布于 2022-09-11 18:03:37 字数 2602 浏览 10 评论 0

clipboard.png
如图所示,要实现可以在表格上直接勾选多选框,然后点击保存,将数据提交到后台。

现在有一个问题,表格数据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:'陆之然'
                }
            ],//权限数据

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

囍孤女 2022-09-18 18:03:37

请贴出获取到的数据结构

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文