el-checkbox的详情回显效果

当你遇到el-checkbox复选框选择时,它是进行多个选择的,如果我们想单选这个时候我们应该怎么做呢?

这个是多个选择的,如果我们想单选代码怎么写呢

<el-checkbox-group
    v-model="formQuery.managementSystem"
    @change="handleCheckManagementSystem">
       <el-checkbox label="0">暂无</el-checkbox>
       <el-checkbox label="1">有</el-checkbox>
</el-checkbox-group>

//script方法
handleCheckManagementSystem(value) {
  if(this.formQuery.managementSystem.length > 1) {
     this.formQuery.managementSystem.splice(0,1)
  }
}

上述的script方法是为了展示formQuery.managementSystem只能存在一个元素

这是最后复选框只能选择一个的效果

再来看一下,怎么让复选框效果回显出来

<el-form ref="form" :model="formQuery" label-width="140px">
     <el-form-item label="是否管理">
        <el-checkbox-group
           v-model="formQuery.managementSystem"
           @change="handleCheckManagementSystem">
              <el-checkbox label="0">暂无</el-checkbox>
              <el-checkbox label="1">有</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否展示">
         <el-checkbox-group
             v-model="formQuery.netRunSafe"
             @change="handleCheckNetRunSafe">
                <el-checkbox label="0">暂无</el-checkbox>
                <el-checkbox label="1">有</el-checkbox>
         </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否确认">
          <el-checkbox-group
              v-model="formQuery.netMessageSafe"
              @change="handleCheckNetMessageSafe">
                <el-checkbox label="0">暂无</el-checkbox>
                <el-checkbox label="1">有</el-checkbox>
           </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否保存">
           <el-checkbox-group
               v-model="formQuery.warnDispose"
               @change="handleCheckWarnDispose">
                <el-checkbox label="0">暂无</el-checkbox>
                <el-checkbox label="1">有</el-checkbox>
           </el-checkbox-group>
      </el-form-item>
</el-form>
<script>
export defalut{
data(){
     return {
        formQuery:{
          managementSystem: [],
          netRunSafe: [],
          netMessageSafe: [],
          warnDispose:[],
        },
      }
},
methods:{
      //回显的方法,怎么让el-checkbox回显关键代码就是
      getDetail(){
      const params = {
              id:this.id
      }
      getDetail(params).then((result) => {
          if(result.result){
            this.formQuery.managementSystem = [];
            this.formQuery.managementSystem.push(result.resultdata.managementSystem);
            this.formQuery.netRunSafe =[];
            this.formQuery.netMessageSafe.push(result.resultdata.netMessage)//关键代码
            this.formQuery.netMessageSafe=[];
            this.formQuery.netMessageSafe.push(result.resultdata.netMessageSafe);//关键代码
            this.formQuery.warnDispose=[];
            this.formQuery.warnDispose.push(result.resultdata.warnDispose)//关键代码
          }
      })
    },
},
}
<script>

回显效果展示

猜你喜欢

转载自blog.csdn.net/m0_66226018/article/details/134947812