vue自定义可增删改联动选择器

项目背景：vue项目，二级联动选择可增删改项

html

<el-table-column label="商品分类" width="300" align="center">
          <template slot-scope="scope">
            <div class="select-box" @click="showFirstLayer(scope.$index)" :disabled="!isJurisdiction">
              <div class="curr" :class="{ on: scope.row.toEdit }">
                <span v-if="scope.row.isEdit" class="fz_14 clr_99">请选择</span>
                <span v-else>{{ scope.row.classificationName }}</span>
                <span class="arrow"></span>
              </div>
              <div class="select-list" v-if="scope.row.toEdit">
                <div class="select-item" v-for="(theitem, index) in selectInfo.typeList" :key="index" @click.stop="givenValueOfCurr(index)">
                  <div class="flex" :class="{active: theitem.isActive}">
                    <div class="flex_1">
                      <span class="icon_circle"></span>
                      <span>{{ theitem.name }}</span>
                    </div>
                    <i class="el-icon-arrow-right mt_12"></i>
                  </div>
                  <div class="select-children" v-if="theitem.isActive">
                    <div class="select-children-item" v-for="(theSeItem, indexchild) in theitem.subData" :key="indexchild">
                      <div class="flex_1 flex" :class="{active: theSeItem.isActive}">
                        <span class="icon_circle mt_12"></span>
                        <input v-if="theSeItem.isEdit" @blur="opeateTypeFn('edit', index, indexchild, theSeItem)" class="edit-input" v-model="theSeItem.name" />
                        <span v-else class="flex_1 pl_3 tl" @click.stop="clickingSecondLayer(index, indexchild, scope.$index)">{{ theSeItem.name }}</span>
                      </div>
                      <div class="iconbtn" v-if="!theSeItem.isEdit">
                        <i class="el-icon-edit-outline clr_44 mt_12 fz_16" @click.stop="opeateTypeFn('toedit', index, indexchild, theSeItem)"></i>
                        <i class="el-icon-remove-outline clr_ed ml_5 mt_12 fz_16" @click.stop="opeateTypeFn('del', index, indexchild, theSeItem)"></i>
                      </div>
                    </div>
                    <i class="el-icon-circle-plus-outline fz_16 clr_19 mt_20 pointer" @click.stop="opeateTypeFn('toadd', index)"></i>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

js

showFirstLayer(index) {
  this.orderInfoList[index].toEdit = !this.orderInfoList[index].toEdit
  this.typeactive = ''
},
givenValueOfCurr(index) {
  this.selectInfo.typeList.forEach((item, i) => {
    if (index == i) {
      this.$set(item, 'isActive', true)
      this.typeactive = index
    } else {
      this.$set(item, 'isActive', false)
    }
  })
},
clickingSecondLayer(index, chidldindex, tableindex) {
  let str = ''
  this.orderInfoList[tableindex].toEdit = !this.orderInfoList[tableindex].toEdit
  this.selectInfo.typeList.forEach((item, i) => {
    if (index == i) {
      str = item.name
      item.subData.forEach((childitem, j) => {
        if (chidldindex == j) {
          childitem.isActive = true
          str += '/' + childitem.name
          this.$set(this.orderInfoList[tableindex], 'classificationCode', childitem.uniqueCode)
          this.$set(this.orderInfoList[tableindex], 'classificationName', str)
        }
      })
    }
  })
  this.$set(this.orderInfoList[tableindex], 'toEdit', false)
},
opeateTypeFn (type, index, cindex, iteminfo) {
  this.selectInfo.typeList.forEach((item, itemindex) => {
    if (itemindex == index) {
      if (type == 'toadd') {
        item.subData.push({ name: "", isEdit: true, parentCode: item.relativeCode })
      } else if (type == 'toedit') {
        this.$set(item.subData[cindex], 'isEdit',  true)
      } else if (type == 'edit') {
        if (this.foodtypesetdataFn(type, iteminfo)) {
          item.subData[cindex].isEdit = false
        }
      } 
    }
  })
},

css

.select-box .curr {
    width: 280px;
    padding-left: 15px;
    padding-right: 30px;
    border: 1px solid #ccc;
    border-radius: 2px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    position: relative;
    z-index: 15;
    color: #666666;
    background-color: white;
    cursor: pointer;
  }

  .arrow {
    position: absolute;
    right: 10px;
    top: 17px;
    display: block;
    width: 10px;
    height: 10px;
    border-left: 1px solid #aaa;
    border-top: 1px solid #aaa;
    transform: rotate(225deg);
    transform-origin: 2px 2px;
    transition: 200ms;
  }

  .on .arrow {
    transform: rotate(45deg);
  }
  .icon_circle{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin-right: 3px;
  }
  .edit-input{
    display: inline-block;
    width: 130px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 0px 3px;
    outline: none;
  }
  .select-list{
    width: 336px;
    height: 180px;
    background: #FFFFFF;
    overflow-y: auto;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    position: absolute;
    top: 50px;
    z-index: 99;

    .icon {
      position: absolute;
      top: -20px;
      left: 150px;
      display: inline-block;
      border-top: 10px solid transparent;
      border-right: 10px solid #f5f5f5;
      border-bottom: 10px solid transparent;
      border-left: 10px solid transparent;
      width: 0px;
      height: 0px;
      z-index: 20;
    }
    .active{
      color: #44A4FE;
    }
    .select-item{
      width: 130px;
      height: 35px;
      line-height: 35px;
      padding: 0px 5px;
      cursor: pointer;
    }
    .select-children{
      position: absolute;
      top: 0;
      left: 130px;
      width: 200px;
      height: 180px;
      overflow-y: auto;
      padding-right: 10px;
      box-sizing: border-box;
      border-left: 1px solid #cccccc;
      .select-children-item{
        height: 35px;
        line-height: 35px;
        display: flex;
        cursor: pointer;
        padding: 0px 5px;
      }
    }
  }
}