vue页面中一个小列表中多选框的选中状态的两种设置方法

最新推荐文章于 2024-06-10 20:05:20 发布

皓月当空hy

最新推荐文章于 2024-06-10 20:05:20 发布

阅读量2.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33911541/article/details/131559409

版权

第一种方法：所有类型都是固定的、后台提供了选中状态的接口(页面进入时默认展示所有类型和类型的选中状态

思路：

1、列出所有类型同时与后台规定好每种类型的id与对应的名称

2、在mounted中执行获取后台给定的选中状态（包含1个或多个的id数组）

3、将得到的结构绑定到el-checkbox-group 的 v-mdel上，到此功能实现（此类适合截图这种）

<el-checkbox-group v-model="checkListState" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="item in defaultChecked" :key="item.id" :label="item.alarm_code">{
  {item.title}}</el-checkbox>
</el-checkbox-group>

data:{
    return {
        defaultChecked:[
        {
          title:'12',