Vue下拉菜单点击事件，el-table添加属性不显示

最新推荐文章于 2024-09-03 15:38:23 发布

又是重名了

最新推荐文章于 2024-09-03 15:38:23 发布

阅读量999

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44077141/article/details/107188412

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

遇到的问题

在做项目的路上总是bug不断，上手公司的项目，然后去修改一个功能，需求大概是这个样子的，通过一个下拉菜单实现一个table的显示，并且新建table中的行或者修改table表头的下拉菜单可以将那一行的单价和单位两个属性全部带出来，可以进行显示和提交。

想法

我觉得想法是最重要的，首先呢我们要完成通过下拉菜单的改变就完成对于单位和单价的携带，首先我们要完成一个单独的接口，来向前端传递一个指定的清单的信息，虽然之前我也是考虑过代码的复用，直接使用上面的通过下拉菜单显示一个table的所有数据，然后在完成一个菜单利用v-for，v-if
但是确实不不合实际，这样需要在前端投入大量的东西，所以我们选择完成一个接口，通过选择的清单的信息将单位和单价等信息进行传入，这是我们表面上能够看得到的问题的解决办法，但是往往会遇到一些其他的问题。

首先，原来的显示

            <el-table-column prop="description" header-align="center" align="center" label="单位" min-width="100px">
              <template slot-scope="scope">
                 <el-input size="mini" v-model="scope.row.description" placeholder="单位"></el-input>
				</template>
            </el-table-column>

显示的效果就是一个可以编辑的带着数值的input框，我们要先将这个框给固定死

{{scope.row.description}}

直接通过{{}}来进行限定，其次就是实现一个通过下拉菜单完成的点击事件
来到element-ui官网查看下拉菜单的属性
添加属性@change，完成选择事件

<el-table-column prop="name" header-align="center" align="center" label="清单名称" min-width="150px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.inventoryName" placeholder="清单名称" size="mini" clearable @change="changeInventory(scope.row.inventoryName,scope.$index)">
                  <el-option v-for="(item, index) in planInventoryLists" :key="index" :label="item.inventoryName" :value="item.inventory_id">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

在这里我们要注意的就是需要穿两个参数第一个是你选择的属性的id，还有一个就是行数，这里使用scope.$index方式来传递行数注意一些。
然后我们看一下具体的方法

//通过下拉菜单完成单位和单价的赋值，并且修改新建清单无效的bug
	changeInventory(val,index){
		// 调用接口，获取该清单的单位等信息
		this.$axios.get(`pc/modelcontractbidinventorysurplus/getBidInventoryListByInventoryList`, {
        params: {
          bidId: this.dataForm.bidId,
          typeId: this.dataForm.maintenanceTypeId,
		  name:val
        }
      }).then((res) => {
 				this.dataForm.planInventoryList[index].price=res[0].price
			})
	},

因为复用了上面的通过下拉菜单产生一个table的功能，所以我们需要传bidId: this.dataForm.bidId, typeId: this.dataForm.maintenanceTypeId,这里的name:val就是将指定的清单的id传到后端进行一个筛选其次就是要进行一个去重，在后端的话我就是只去了一个，因为清单的数量可能会有多个所以我们只去了其中的第一个就break了

/**
     * 本方法主要是完成显示一个下拉菜单，并且将下拉菜单中携带的信息中主要的单位和单价
     * @param params
     * @return
     */
    @GetMapping("getBidInventoryListByInventoryList")
    @ApiOperation("通过下拉菜单完成清单的显示单位和单价")
    @RequiresPermissions("pc:modelcontractbidinventorysurplus:getBidInventoryList")
    public Result<List<Map>> getBidInventoryListByInventoryList(@ApiIgnore @RequestParam Map<String, Object> params) {
        String listName = (String)params.get("name");
        params.put("name","");
        if(StringUtils.isNotBlank(listName)){
            List<Map> bidInventoryList = modelContractBidInventorySurplusService.getBidInventoryList(params);
            List<Map> bidInventoryLists=new ArrayList<>();
            for (int i = 0; i < bidInventoryList.size(); i++) {
                Map map = bidInventoryList.get(i);
                if(listName.equals(map.get("inventory_id"))){
                    bidInventoryLists.add(map);
                    break;
                }
            }
            return new Result<List<Map>>().ok(bidInventoryLists);
        }
        return null;
    }

然后就是出现了一个问题我已经在后端将具体的属性传递到了前段，但是前段的表中不显示具体的数据，但是我从后端已经传递到了前段的制定的值，但是不能够显示，我在网上进行查询之后，找到一种方式this.$set(this.dataForm.planInventoryList[index],'price',res[0].price)
在这里我们遇到的问题就是，我们目前的这个table已经是将属性显示出来了，但是我们后面通过下拉菜单给table表格强行赋值，但是table没有显示，$set可以将已经显示初值的table属性再次赋值，然后其实这里还有一个程序上设定的bug，就是你自己新增的一行中及时通过下拉菜单选定了制定的清单但是依旧没有办法真正的提交，即使能够提交清单的值后面的系统中的其他的操作也没有办法进行操作，所以我们在这里将，上面的下拉菜单产生的table表中的值所带的属性通过自己写的下拉菜单将属性赋给了table中的一行，便于我们提交。

后面是我们修改以后的代码

changeInventory(val,index){
		// 调用接口，获取该清单的单位等信息
		this.$axios.get(`pc/modelcontractbidinventorysurplus/getBidInventoryListByInventoryList`, {
        params: {
          bidId: this.dataForm.bidId,
          typeId: this.dataForm.maintenanceTypeId,
		  name:val
        }
      }).then((res) => {

		  // if(res.data.size()!=0||res.data!=null){
			  // this.dataForm.planInventoryList[index].price=res[0].price
			  this.$set(this.dataForm.planInventoryList[index],'price',res[0].price)
			  this.$set(this.dataForm.planInventoryList[index],'description',res[0].description)
			  
			  this.$set(this.dataForm.planInventoryList[index],'bid_id',res[0].bid_id)
			  this.$set(this.dataForm.planInventoryList[index],'contract_id',res[0].contract_id)
			  this.$set(this.dataForm.planInventoryList[index],'id',res[0].id)
			  this.$set(this.dataForm.planInventoryList[index],'inventory_id',res[0].inventory_id)
		  // }
		  // 改变单位和单价的值
		 
		})
	},