在el-table中 el-select实现可下拉选择和手动输入

最新推荐文章于 2024-03-29 16:58:57 发布

爱心觉罗晓宇

最新推荐文章于 2024-03-29 16:58:57 发布

阅读量1.4k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_44716001/article/details/132764222

版权

<el-table>
 <el-table-column  prop="pages"   label="页码" width="200">
          <template slot-scope="scope">
          <el-select  v-model="scope.row.pages"  ref="produceRef"  @blur="handleChange(scope.row)"
   allow-create filterable clearable>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      placeholder=""
      :value="item.value"
    ></el-option>
  </el-select>
    </template>
        </el-table-column>
</el-table>


方法
   handleChange(row) {
          row.pages = this.$refs.produceRef.selectedLabel
          console.log(row, this.$refs.produceRef.selectedLabel, '输入的数据')
    // 处理输入的值直接回显逻辑
    if (!this.options.find(item => item.value === row.pages)) {
      // 如果输入的值不在选项列表中，将其作为新选项添加到选项列表中
      const newOption = {
        value: row.pages,
        label: row.pages
      };
      this.options.push(newOption);
    }
    this.$forceUpdate()
  },