多选单选混合 element-ui_element的选择器和多选框的组合使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45945615/article/details/110527093

本文介绍了在Vue.js项目中使用Element-UI库实现多选和单选组件混用的方法，探讨了可能的实现策略，并邀请读者分享更优的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 工具描述: 用于实现多选单选混合
 * @param {Array} arr 多选值
 * @param {Array} nlt 单选值
 * @param {Array} _this 数据绑定对象
 * @param {Array} last 最后点击的选项
 * 使用方法：
 * 1. 引入： import { checkedFn } from "@/utils/multiSelect.js"
 * 2. 使用：用于element=>checkbox-group 容器中 标签添加 @change="val => Checked(val, type(区分值))" 事件
 */

// 示例
// 单选多选
// Checked (item, type) {
//   let arr = []
//   let nlt = []
//   let _this = null

//   // 平台
//   if (type === 'platform') {
//     arr = ['AUDIENCE_IOS', 'AUDIENCE_ANDROID']
//     nlt = ['AUDIENCE_UNLIMITED', 'AUDIENCE_PC']
//     _this = this.ruleForm.platform
//   }

//   _this = checkedFn(arr, nlt, _this, item)
// }

export const checkedFn = function (arr = [], nlt = [], _this = [], last) {
  let va = last[last.length - 1]
  if (nlt.indexOf(va) !== -1) {
    arr.forEach(item => {
      if (_this.indexOf(item) !== -1) _this.splice(_this.indexOf(item), 1)
    })
    nlt.forEach(item1 => {
      if (_this.indexOf(item1) !== -1) if (item1 !== va) _this.splice(_this.indexOf(item1), 1)
    })
  } else {
    arr.forEach(item2 => {
      if (_this.indexOf(item2) !== -1) {
        if (_this.indexOf(nlt) !== -1) _this.splice(_this.indexOf(nlt), 1)
        nlt.forEach(item3 => {
          if (_this.indexOf(item3) !== -1) _this.splice(_this.indexOf(item3), 1)
        })
      }
    })
  }
  return _this
}