提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

今天在使用Vue+elementUi编写表格的时候,想获取当前车辆的 品牌名称,由于没有进行两表联查,其他下拉框已经查询了所有车辆类型。就想着写一个 方法,传入类型编号,在前端使用forEach解决

一、示例

表格显示列

	 <el-table-column label="车类型" align="center">
        <template slot-scope="scope">
           <!-- {{ this.brandList.filter(data =>  data.brandId == scope.row.brandId).brandName}} -->
           <span>{{getBrandName(scope.row.makeBrandId)}} </span>
        </template>
      </el-table-column>

方法实现

 /**
     * 根据汽车类型获取类型名称
     */
    getBrandName (makeBrandId) {
        this.brandList.forEach(item => {
            if(item.brandId == makeBrandId) {
                  return  item.brandName
            }
        })
    },

是不是感觉非常的好,没什么问题,但是让我失望了,没有任何反应

二、解决方法

非常的简单,只用把匹配的值通过局部变量存储起来,到最后返回即可

     /**
      * 根据汽车类型获取类型名称
      */
     getBrandName (makeBrandId) {
         let brandName = "";
         this.brandList.forEach(item => {
             if(item.brandId == makeBrandId) {
                 brandName = item.brandName
             }
         })
        return brandName
     },

总结

不要卡在一个地方,要灵活变通,先出效果,再谈最好的方式,但是这个原因笔者还没有理解,先记录一下,
如有知道的读者,虚心请教!

Logo

前往低代码交流专区

更多推荐