vue中table表格实现select下拉框，table下拉框(select)选项选中禁用

实现功能与效果图片展示

a. table中实现可编辑下拉框

先上代码哈哈哈

<div class="serve" style="width: 100%; overflow: hidden">
      <div class="table-btn"> <el-button class="btn" size="mini" type="primary" plain icon="el-icon-plus" @click="handleAdd" /></div>
      <el-table ref="tableRef" class="table-form" :height="height" style="width: 100%" border :data="form.tagArr">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :formatter="item.formatter"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row, $index }">   //row是每行绑定的数据. $index是每行索引
            <el-select v-if="item.prop === 'tagName'" v-model="row[item.prop]" size="mini" @change="changeTag(row)">
              <el-option v-for="mtItem in settingTagSelect(row, $index)" :key="mtItem.value" :disabled="mtItem.disabled" :label="mtItem.label" :value="mtItem.value" />
            </el-select>
            <template v-else-if="item.prop === 'tagValue'" class="table-row">
              <el-select v-if="row.tagName !== 'lineName'" v-model="row[item.prop]" size="mini" style="width: 150px; margin-right: 5px" :rules="rules.commonRequired">
                <el-option v-for="mtItem in row.tagOptions || []" :key="mtItem.value" :label="mtItem.label" :value="mtItem.value" />
              </el-select>
              <el-input v-else v-model="line" placeholder="请输入内容" style="width: 150px; margin-right: 5px" />
              <el-tooltip :enterable="false" :open-delay="300" :content="$t('common.delete')">
                <el-button class="btn" icon="el-icon-minus" type="danger" plain size="mini" @click="handleDel(row,$index)" />
              </el-tooltip>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>

columns: [
        { label: 'Tag名称', prop: 'tagName', width: 150 },
        { label: 'Tag值', prop: 'tagValue' }
      ],

b.根据不同选项决定某列是： 输入框/下拉框

【row.tagName表示的是列名】

c.选择不同选项 决定不一样的下拉选项组

实现思路：chang事件在每次下拉框的选择都会触发，触发后传递row也就是当前行的数据(这里有每列的列名和对应绑定的值)，我们根据选项不同，往里面新增一个tagOptions数组 就可以啦。

不懂得打印row认真看看就知道辽~~~

changeTag(row) { 
      // 映射 
      const keyMap = {
        //选中的值 : 决定的下拉数组
        direction: this.testDirectionOptions,
        level: this.testLevelOptions,
        target: this.testTargetOptions
      }
      this.$set(row, 'tagValue', '') //先清空之前选过的选择值
      this.$set(row, 'tagOptions', keyMap[row.tagName] || [])  
    },

keyMap[row.tagName]是映射 当row.tagName的值是level，返回 this.testLevelOptions数组。

this.$set(row, 'tagOptions', keyMap[row.tagName] || [])  

【往row对象中添加一个tagOptions对象，值就是keyMap[row.tagName]， 映射不存在返回空数组】

这样就可以实现根据选择的选项不同来 决定另外一列的下拉选项的数据啦~~

d. select下拉选项在table中选中禁用的实现 (只允许选择一次)

【废话一下】实现此功能要考虑，选择选项之后disabled禁用，当切换选项的时候，需要把选中的禁用还需要把之前禁用的取消禁用。

// 处理复选框禁止重复勾选的方法
    settingTagSelect(row) {
      const tagNameArr = this.form.tagArr.filter(el => el.tagName).map(el => el.tagName)
      const tag = this.tagData
      // 设置该行disable
      tag.forEach(item => {
        item.disabled = tagNameArr.includes(item.value) && item.value !== row.tagName
      })
      console.log(tag)
      return tag
    }

【this.form.tagArr就是table绑定的数组】

this.form.tagArr.filter(el => el.tagName) 过滤出tagArr数组的对象中存在tagName属性的对象数组，存在说明就是用户选选择的
.map(el => el.tagName) 数组中取出tagName的值组成新的数组tagNameArr

遍历表格this.tagData来进行对比，设置disabled。

e.删除行数据

handleDel(row, index) {
  // 删除指定位置的数据  index每行的索引
  this.form.tagArr.splice(index, 1)
},

小菜鸡的第一次分享，觉得有帮助的yy们可以点个赞支持一下哦~