总结：表格中选择不同材料

最新推荐文章于 2025-07-04 15:03:43 发布

kogmini

最新推荐文章于 2025-07-04 15:03:43 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/csdnyp/article/details/120016197

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

12 篇文章

订阅专栏

情况一：仓库在表格行外
在这里插入图片描述

<el-dialog
        width="50%"
        title="查询材料信息"
        :visible.sync="purchaseOrder"
        >
        <el-table
          :data="purchaseList"
          style="width: 100%;max-height: 400px;"
          @row-click="getSelectRow"
          @row-dblclick="dbSelected"
          class='scroll'
          border>
          <el-table-column
            prop="materialNumber"
            label="材料编号"
            width="180"
            align="center">
          </el-table-column>
          <el-table-column
            prop="materialName"
            label="材料名称"
            width="180"
            :show-overflow-tooltip="true"
            align="center">
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="库存"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价（元）"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="type"
            label="材料类型"
            align="center">
          </el-table-column>
          <el-table-column
            prop="status"
            label="材料状态"
            align="center">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="备注"
            align="center">
          </el-table-column>
        </el-table>
        <div class="pages">
          <el-pagination
            background
            :total="total2"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="purchasePageNumChange"
            @size-change="purchasePageSizeChange"
          ></el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="purchaseOrder = false">取 消</el-button>
          <el-button type="primary" @click="okChoose()">确定选择</el-button>
        </div>
      </el-dialog>

	//绑定materialList数组的表格行的索引
	getSelectIndex(data) {
      console.log('表格索引',data)
      this.getIndex = data;
    },
	//新增双击材料
    dbSelected(row){
      this.selectRow=row;
      let isShow=true;//默认为没有选中相同材料
      if(this.materialList.length>1){
        let testData=[];//存放已经在表格中的数据
        this.materialList.forEach((value,index)=>{
          if(index!=this.getIndex){
            testData.push(value)
          }
        })
        console.log('testData',testData)
        testData.forEach(value => {
          if(value.warehouseNumber!=this.publicInformation.warehouseNumber){

          }else {
            if(value.materialNumber==this.selectRow.materialNumber && value.unitPrice==this.selectRow.price){
              isShow=false
            }
          }
        })
      }else {
        isShow=true;
      }
      console.log("isShow",isShow)
      if(isShow==true){
          this.addMaterialRow()
          this.purchaseOrder = false;
      }else {
        this.$swal.fire({
          icon: 'warning',
          title: '请不要重复选择相同材料',
          showConfirmButton:true,
        })
        this.purchaseOrder = true;
      }
    },

情况二：仓库在表格行内
在这里插入图片描述

async getAddMaterialDetails() {
      let isShow=true
      if(this.addMaterialList.length>1){
        let testData=[]
        this.addMaterialList.forEach((value,index)=>{
          if(index!=this.getIndex){
            testData.push(value)
          }
        })
        console.log('testData',testData)
        testData.forEach(value=> {
          if(value.warehouseNumber!=this.addMaterialList[this.getIndex].warehouseNumber){
          }else {
            if(value.materialNumber== this.addAterialDetails.materialNumber){
              isShow=false
            }
          }
        })
      }else{
        isShow=true
      }
      console.log('isShow',isShow)
      if(isShow==true){
        this.addAterialDetailsList()
        this.addAterialDetail=false;
      }else {
        this.$swal.fire({
          icon: 'warning',
          title: '请不要重复选择相同材料',
          showConfirmButton:true,
        })
        this.addAterialDetail = true;//材料/工具框
      }
    },