vue分类标签的选择

dmr

html:
<!--标签选择-->
<el-input isRequire name="标签" :isNeedInput="false" :nameStyle="nameStyle">              <el-button @click="choosePost">{{ tradeList.length==0?'选择岗位标签':'重新选择' }}</el-button>
              <el-tag v-for="trade in tradeList" :key="trade.id" closable type="tag" @close="closeTradeTag(trade)">                {{trade.trade_name}}
              </el-tag></el-input>
<!--标签选择的弹框-->

<popupBox title="岗位选择" ref="popup" :popStyle="popStyle" isShowBtn :btns="btns" :btnHandle="choosePostDone"    :isShowClose="false">
    <div class="category-box">
<div class="box-left">
        <p v-for="(item,index) in postDict" :class="index == checkIndex?'active':''" @click="switchPostType(index)">{{ item.trade_name }}</p>
      </div>

<div class="box-right">        <span v-for="child in childList" :key="child.id">
          <el-checkbox v-model="child.checked" @change="checkBoxChange" :true-label="child.id" :false-label="child.id">{{ child.trade_name }}</el-checkbox></span>
      </div>    </div>
  </popupBox>

js:

data() {    return {
                 tradeList: [], //选择的标签
               },
methods:{

    //选择岗位      choosePost() {
           this.$refs.post.showPopup(this.tradeList, 1);       },
              //删除tag
     closeTradeTag(trade) {
          let index = this.tradeList.findIndex(v => v.id == trade.id);
          this.tradeList.splice(index, 1);
    },

//切换大类      switchPostType(index) {
        this.checkIndex = index;      },

getTraderTree() {//标签的数据        this.TRADE_TREE_LIST().then(res => {
          this.postDict = res;          this.childList = this.postDict[this.checkIndex].childTradeList.map(v => {
            return
...v,
              checked: this.checkPosts.findIndex(item => item.id == v.id) > -1 ? true : false
            }
});
          console.log(this.childList)；
})
}，

//多选按钮选中时      checkBoxChange(val) {
        let index = this.checkPosts.findIndex(v => v.id == val);
if (index > -1) { //数据中存在
          this.checkPosts.splice(this.checkPosts.findIndex(v => v.id == val), 1);
          let cur = this.childList.find(v => v.id == val);

this.$set(cur, "checked", false);        } else { //数组中不存在
          let cur = this.childList.find(v => v.id == val);
if (this.checkPosts.length >= this.maxLength) {
            this.$set(cur, "checked", false);
            return this.$msg(`最多选择${this.maxLength}个职位`);

} else {            this.checkPosts.push(cur);
          }        }
      }}，

微信扫一扫，分享更方便