iview中的table中定义下拉框和赋值

Vue表格下拉框组件实战

原创已于 2022-03-29 13:44:19 修改 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#iview的table中遇到的问题 #iview的table中定义下拉框 #下拉框定义事件

于 2019-11-26 15:53:14 首次发布

iview 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中实现表格中的下拉框组件，通过具体代码案例展示如何绑定事件、处理数据转换以及使用自定义渲染函数。文章详细解释了如何从前端角度将后端返回的ID转化为实际显示的文本，适用于需要在表格中添加交互式下拉选择功能的开发者。

table中定义下拉框

案列

在这里插入图片描述

代码

  {
            title: '缴费周期类型',
            key: 'rentCycleType',
            align: 'center',
            width: 140,
            render: (h, params) => {
              const row = params.row;
              return h(
                'Select',
                {
                  props: {
                    value: row.rentCycleType,
                  },
                  on: {
                    'on-change': event => {//------------下拉框事件
                      this.addContractMsg.chargeRents[params.index].rentCycleType = event   // -----------赋值
                    }
                  }
                },
                this.payCycleTypeEnum.map(obj => {
                  return h(
                    'Option',
                    {
                      props: {
                        value: obj.value,
                        label: obj.label
                      }
                    },
                    obj.label
                  );
                })
              );
            }
          },

前端转义（后端返回一个id，前端在数组中自己转义id对应的名字）

案例图

在这里插入图片描述
###代码

 {
          title: "缴费周期类型",
          width: 160,
          align: "center",
          key: "rentCycleType",
          render: (h, params) => {
            let text = "";
            this.payCycleEnum.map(item => {
              if (item.value === params.row.rentCycleType) {
                text = item.label;
              }
            });
            return h("div", text);
          }
        },