表格行Render函数中实现下拉框，option数据动态获取

前段时间做项目的时候，遇到了一个需要在表格里面实现每一行都要嵌入一个选择的下拉框，也就是最后要实现成如下图的这种：

或许一看到这个，有人会觉得其实蛮简单的，使用ElementUI的表格，然后在el-table-column里面使用template就可以实现了。

大概就是这样子：

<el-table-column label="名称">
 <template slot-scope="scope">
     <el-select size="small" value-key="Code" v-model="scope.row.date>
       <el-option v-for="item in Options"
                  :key="item.Code"
                  :label="item.Name"
                  :value="item">
       </el-option>
     </el-select>
   </template>
 </el-table-column>

但是呢，不巧，我们的项目不是使用ElementUI的表格，而是使用了基于vxe-table自行封装的表格组件。所以，如果我想要对表格行里面的数据进行其他形式的显示，想到是通过Render函数去实现了。

下面是一些实现的代码：

{
   title: "原因",
   field: "bnwzbsyy",
   minWidth: 200,
   align: "center",
   fixed: "right",
   filterFlag: false,
   sortable: false,
   render: (h, params) => {
     return h(
       "el-select",
       {
         class: "select-style",
         props: {
           value: params.row.bnwzbsyy,
           size: "mini",
         },
         on: {
           change: (v) => {
             params.row.bnwzbsyy = v;
             // render函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。
             this.$forceUpdate();
           },
         },
       },
       [
         this.reasonList.map((val) => {
           // 下拉框里的内容,reasonList下拉框数据
           return h("el-option", {
             props: {
               value: val.code,
               label: val.name,
             },
           });
         }),
       ]
     );
   },
 },

上面的代码就是在每一行数据里面显示下拉框，下拉框里面的数据是请求后台接口返回的，下拉改变值的时候赋值给当行数据的对应字段，这样就可以在操作的时候拿到下拉框中选择的数据。

关于请求后台获取option数据的方法，其实我们也对接口请求进行了封装：

methods: {
  async init() {
    // 请求原因
    await getReason().then((res) => {
      if (res.head.errorCode == "0" && res.body) {
        this.reasonList = res.body;
      }
    });
  },

关于样式：

.select-style {
    /deep/.el-input--mini .el-input__inner {
      height: 24px !important;
    }
  }

这样其实大体就是已经实现了。

最后，其实博客写的不是很好，但是希望能记录下自己遇到的一些问题或者实现的一些小功能，如果你也刚刚好需要，可以看看哦~