精华内容
下载资源
问答
  • ant a-checkbox-group多选框组默认选中
    2021-08-17 14:40:17
    <a-checkbox-group v-model="defaultCheckedList" :options="plainOptions" @change="onChange" />
    <script>
    const plainOptions = [ { label: '读', value: '1' },
            { label: '写', value: '2' },
            { label: '删', value: '3' }];
    const defaultCheckedList = ['1', '2'] //默认选中 的项
    export default {
            data() {
                return {
                	plainOptions,
                    defaultCheckedList,
                }
            }
       }
    </script>
    

    在这里插入图片描述

    更多相关内容
  • Ant Design vue a-checkbox-group 不生效

    问题是点击 多选框之后没有改变视图

    在拿到数据回填后,点击多选框没有改变视图,代码如下:
    demo :
    在这里插入图片描述
    在这里插入图片描述
    数据:
    在这里插入图片描述
    在这里插入图片描述

    方法:
    在这里插入图片描述

    当我点击多选框之后

    打印的数组
    在这里插入图片描述
    视图
    在这里插入图片描述

    原因以及解决

    我就发现数据其实是已经改变了的,但是他的视图却没有改变,因此我怀疑是因为 vue 会监听不到数组的变化,故此使用 this.$forceUpdate() 来强制刷新页面,问题就解决了。

        admissionChange (checkedValues) {
          this.$set(this.form, 'admissionModeArr', checkedValues)
          this.$forceUpdate()
          this.setCkeckBox = Boolean(this.form.admissionModeArr.includes('3'))
          console.log(this.form.admissionModeArr)
        },
    
    展开全文
  • ant a-checkbox复选框无法选中

    为什么我点击复选框,不会选中,需要操作一下其他组件才会出现勾选呢??搞了好久,后来看到一个帖子,解决了。特此记录一下

    v-model 是二级字段,修改 v-model 为一级字段可解决,即 v-model="data.channel" 修改为 v-model="channel" ,然后在 onCheckboxChange() 再把值赋给 data.channel 。

    参考自(47条消息) a-checkbox-group 赋值后不能点击问题_hy_ethel的博客-CSDN博客_a-checkbox

    展开全文
  • style="margin-left: 10px"/> a-col> a-row> a-checkbox-group> a-form-model-item> a-col> a-row> a-form-model> c-modal> template> js import moment from 'moment' import 'moment/locale/zh-cn' moment.locale...

    效果

    在这里插入图片描述
    如图所示,这是一个弹窗,弹窗中是多选框。而且不仅包含了多选框,还包含了时间组件

    实现代码

    页面

    <template>
      <c-modal
        title="资质"
        centered
        :destroyOnClose="true"
        :visible="visible"
        :loading="loading"
        :confirmLoading="confirmLoading"
        @ok="handleSubmit"
        @cancel="handleClose"
      >
        <a-form-model
          :label-col="{ span: 24 }"
          :wrapper-col="{ span: 24 }"
          ref="StaffQualification"
          :model="form"
          :rules="rules"
          :validate-messages="validateMessages"
        >
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="资质" prop="qualification">
                <a-checkbox-group v-model="form.qualification">
                  <a-row>
                    <a-col style="margin-bottom: 10px" v-for="item in qualificationOptions" :key="item.qualification.id">
                      <a-checkbox style="width: 200px" :value="item">{{ item.qualification.name }}</a-checkbox>
                      <a-date-picker :default-value="item.qualificationStartAt" v-model="item.qualificationStartAt" :format="dateFormat" placeholder="开始日期" style="margin-left: 10px"/>
                      <a-date-picker :default-value="item.qualificationEndAt" v-model="item.qualificationEndAt" :format="dateFormat" placeholder="结束日期" style="margin-left: 10px"/>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </c-modal>
    </template>
    

    js

    import moment from 'moment'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')
    
    export default {
      data () {
        return {
          loading: false,
          visible: false,
          confirmLoading: false,
          form: {
              qualification: []
          },
          qualificationDate: null,
          rules: {},
          qualificationOptions: [],
          dateFormat: 'YYYY-MM-DD'
        }
      },
      methods: {
        async edit (record) {
          this.visible = true
          this.loading = true
          try {
              this.form.id = record.id
              // 从后台取到资质列表
              const arr = await xxx.query(
                  {},
                  { showLoading: false, showSuccess: false, showFailure: false }
              )
              // 定义两个list分别存下拉框的选项 和 绑定的选项
              this.qualificationOptions = []
              this.form.qualification = []
              arr.forEach(optionsMap => {
                  const optionsNode = {
                      id: null,
                      qualification: {
                          id: optionsMap.id,
                          name: optionsMap.name
                      },
                      qualificationEndAt: null,
                      qualificationStartAt: null
                  }
                  // 回显
                  record.staffQualifications.forEach(map => {
                      if (optionsNode.qualification.id === map.qualification.id) {
                          optionsNode.id = map.id
                          optionsNode.qualificationEndAt = moment(map.qualificationEndAt, 'YYYY-MM-DD')
                          optionsNode.qualificationStartAt = moment(map.qualificationStartAt, 'YYYY-MM-DD')
                          this.form.qualification.push(optionsNode)
                      }
                  })
                  this.qualificationOptions.push(optionsNode)
              })
          } catch (error) {
            console.error(error)
          }
          this.loading = false
        },
        handleSubmit () {
              this.confirmLoading = true
              const staffQualifications = []
              this.form.qualification.forEach(item => {
                  const qualification = {
                      id: item.qualification.id
                  }
                  const staffQualification = {
                      qualification: qualification,
                      qualificationStartAt: item.qualificationStartAt !== undefined ? item.qualificationStartAt.format('YYYY-MM-DD HH:mm:ss') : null,
                      qualificationEndAt: item.qualificationEndAt !== undefined ? item.qualificationEndAt.format('YYYY-MM-DD HH:mm:ss') : null
                  }
                  staffQualifications.push(staffQualification)
              })
              const requestModel = {
                id: this.form.id,
                staffQualifications: staffQualifications
              }
              try {
                // 提交
                await xxx.updateQualification(requestModel, { showLoading: false })
                this.confirmLoading = false
                this.handleClose()
                this.$emit('ok')
              } catch (error) {
                this.confirmLoading = false
              }
            } else {
              return false
            }
        },
        handleClose () {
          if (this.$refs['StaffQualification'] !== undefined) {
            this.$refs['StaffQualification'].resetFields()
          }
          this.visible = false
        }
      }
    }
    </script>
    
    展开全文
  • <a-checkbox-group :options="options"/> options:[{label:'1',value:'one'},{label:'2',value:'two'},{label:'3',value:'three'}],
  • 检查后台数据和和checkbox的值是否类型相似,是否一个 int...a-checkbox-group v-model="v.area_id" @change="onChange"> <span v-for="(vo,key) in areas" :key="key"><a-checkbox :value="''+vo.id">
  • 今天在使用ant-design中的a-checkbox插件时,报了以上的警告,通过查阅资料了解到是在使用v-decorator校验规则时没有设置valuePropName的值,正确代码如下 v-decorator="['ifSkipChecked', {initialValue: true, ...
  • a-checkbox-group 赋值后不能点击问题

    千次阅读 2020-10-15 17:08:13
    a-checkbox-group v-model="data.channel" :options="plainOptions" @change="onCheckboxChange" /> 如图: 解决: v-model 是二级字段,修改 v-model 为一级字段可解决,即 v-model="data.channel" 修改为...
  • 因为后端数据库传送的参数是布尔类型的true和false 前端决定用复选框回选 编辑表单/初始化表单 form: this.$form.createForm(this), ... this.form.resetFields();... this.model = Object.assign({}, record);...
  • 当勾选完点确认按钮调接口的时候,要拿每一勾选项当前行的值。所以要循环勾选的值,在循环里追加值到新数组里。 在table中加入这一行,就可以出现第一列是复选框 :row-selection="{ selectedRowKeys: ...
  • 后台返回第一个checkboxa值是'1'',第二个checkbox的也是b值是'1','1' 表示true ,'0' 表示false。 我要实现的就是当选中第一个checkbox后,第二个会checkbox自动勾选,然后第二个勾选不影响第一个,只有第一个...
  • }Attrsattrformatstroke_widthdimensioncolor_beforecolorcolor_aftercolorcheck_textstringcheck_stylefork/hookshow_borderbooleanis_circle_borderbooleanUsageIn Layout File<com.bigmercu.cBox.CheckBox  ...
  • CheckBoxGroup 自定义属性,自定义控件,自定义函数,自定义类;多选框checkBox
  • element官方文档中el-checkbox-group组件绑定的是基础数据类型(string / number / boolean),但是最近开发项目过程中需要绑定数组对象结构的数据,那么在后端返回数据的时候是没办法在多选框回显的。 测试代码如下:...
  • <td class="tab_title_last">...el-checkbox-group v-model="item.evaluationType"> <el-checkbox v-for="(i,index) in totalTypes" :label="i.id" :value="i.id" :key="i.id" name="type" ..
  • 下面小编就为大家带来一篇改变checkbox默认选中状态及取值的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂。重要的是@chage到我们写的类 <el-checkbox-group v-model=...
  • 记录element-ui中el-checkbox-group的坑

    千次阅读 2021-05-29 10:32:52
    需求:打开这个dialog时,自动选择已有的选项。在input框中可以搜索 问题:在el-checkbox中...不必在el-checkbox中设置checked,直接将需要默认选中的选项放到el-checkbox-group中v-model所绑定的数组中即可。 ...
  • el-checkbox-group v-modle=checkboxGroup1 @change=handleCheckbox> <el-checkbox-button v-for=“(item in msgList ” :disabled=current ItemId? currentItemId !==item.id : false :key=“index ”> ...
  • el-checkbox-group绑定值与回显

    千次阅读 2021-04-07 12:02:10
    checkListData:[];//多选框里要显示的数据 checkListDataStr:"", checkList:[ {propCode:"01",propName:'测试1'},...el-checkbox-group v-model="checkListData" > <el-checkbox v-for="item in checkList
  • el-checkbox-group v-model="item.attr_checked_vals"> <el-checkbox border :label="cb" v-for="(cb, i) in item.attr_vals" :key="i"></el-checkbox> </el-checkbox-group> ..
  • 场景 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏: ...也可以使用el-checkbox-group,代码逻辑使用switch判断的方式决定隐藏和显示。 注: 博客:霸道流氓气质的博客_CSDN博客-C#,架构之路,Spr.
  • <van-checkbox-group :value="result" @change="onChange" max="2">...</van-checkbox-group> 表示最多可选 2 项。 4.搭配单元格组件使用 首先引入 van-cell 和 van-cell-group: "usingComponents": { ...
  • NULL 博文链接:https://lw671579557.iteye.com/blog/579242
  • 页面要做成这种 chechkbox 能进行拖拽的,并且选中当前行一个虚线效果 借助了 awe-add 这个插件进行实现的 使用: 1:下载: npm install awe-add --save 2:在main.js里面进行应用 import VueDND from 'awe-dnd' ...
  • 1、问题描述:使用elementui 中的多选框组件,编辑表单内容时可以正常显示,但是改变时一个选择无效,显示状态没有修改成功问题;如下图所示: 2、使用说明:仅部分主要代码,markList 为被选项列表。...
  • ant-design-vue checkbox checked不生效

    千次阅读 2021-05-06 18:42:22
    ant-design-vue checkbox checked不生效 https://segmentfault.com/q/1010000018981910 基本用法
  • <!--标注选择标签弹层组件--> <template> <div class="message-box dialog-mask"> <div class="dialog-content">...el-checkbox :indeterminate="isIndeterminate" v-mod...
  • 在 el-checkbox 设置 onclick="return false" 可以使复选框点击功能失效,且不会改变其颜色样式 效果如下
  • 'Redis服务' }, { value: 5, label: 'LibreOffice服务' } ], 后端要的是一个value的数组 而我们展示要用label 那么我们页面可以这样写 <template> <div class="app"> <el-form-item label="请选择:"> <el-checkbox-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 163,555
精华内容 65,422
关键字:

a-checkbox