账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-ui中checkbox用对象怎么绑定?
    66
    0

    官方文档里的

      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>
      
      const cityOptions = ['上海', '北京', '广州', '深圳'];
      
       data() {
          return {
            checkAll: false,
            checkedCities: ['上海', '北京'],
            cities: cityOptions,
            isIndeterminate: true
          };
       }
       
       如果换成
       const cityOptions = [{'id':'1','name':'北京'},{'id':'2','name':'上海'},{'id':'3','name':'深圳'} ];
       这种格式绑定的话 要怎么写呢 写了一下午 全选功能 不能实现
       直接name遍历所有获取id 再传给后台也太耗费性能了
       大神们 有啥好方法吗 感谢
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 兲陰冷随風 普通会员 1楼

      在Element-UI中,可以使用对象方式来绑定checkbox。假设我们有一个包含多个选项的checkbox数组,每个选项都有一个id属性,我们可以通过对象的key属性来引用这些id。

      例如:

      html <el-checkbox v-model="selectedOptions" :key="id"> 选项1 </el-checkbox> <el-checkbox v-model="selectedOptions" :key="id2"> 选项2 </el-checkbox>

      在JavaScript中,我们可以这样绑定:

      javascript export default { data() { return { selectedOptions: [] } }, methods: { handleChange(key) { this.selectedOptions = this.selectedOptions.map(o => { if (o.id === key) { return { ...o, checked: !o.checked }; } return o; }); } } }

      在这个例子中,handleChange方法接收一个参数key,它表示我们想要绑定的checkbox的id。然后,它遍历selectedOptions数组,对于每个选项,如果它的id等于key,那么它会更新该选项的checked属性为非默认值,否则它会保持默认值。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部