多選單選混合 element-ui

weixin_45945615發表於2020-12-03
/**
 * 工具描述: 用於實現多選單選混合
 * @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
}

如果有大佬知道更好的方法可以教教我

相關文章