此场景分为两种情况

1.单独一个下拉框时

2.el-table每行数据都有下拉框时

 

这里只介绍第 种情况,方法都是一样的

思路:
1.首先选择下拉框事件拿到选择的这行数据scope.row
 2.其次去遍历绑定的下拉框数据,使用find()方法查找item.value === row.value
 3.找到则返回对应的row.label
  4.最后将label值以键值对形式加到row对象中

代码实例:

     <el-table-column label="日期" width="120">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.dependOptions"
              placeholder=""
              @change="updateValueT(scope.row)"
            >
              <el-option
                v-for="list in dependOptions"
                :key="list.value"
                :label="list.label"
                :value="list.value"
              />
            </el-select>
          </template>
        </el-table-column>

//方法
   updateValueT(row) {
      //el-table表格有多行数据  选择下拉框拿到value和label,并添加个selectType字段返回给row ****非常常用的知识点
      console.log(row);
      const selectedLabel = this.dependOptions.find(
        (ele) => ele.value === row.dependOptions
      ).label;
      console.log(selectedLabel, "selectedLabel");
      this.$set(row, "slectType", selectedLabel);
      console.log(row, "row");
      return row;
    },

GitHub 加速计划 / vu / vue
109
19
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐