vue Element-UI 在Table 表格指定列添加点击事件

骑猪看日落 2022-12-14 15:54 931阅读 0赞

## 需求：同一物料存在不同批次，点击库存查询每一批次的库存信息。 ##

点击库存列查询具体库存信息，弹窗形式显示  
![点击库存列][20201014152114180.png_pic_center]

![显示弹窗][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]

index.vue

//只截取表格中需要添加事件列
    <div class="avue-crud">
    	<el-table
    	:data="dataList"
    	border
    	v-loading="dataListLoading">
    	<el-table-column
    		prop="count"
    		header-align="center"
    		align="center"
    		label="库存">
    		
    		<template slot-scope="scope">
    		<el-button  type="text" size="small" @click="queryWarehouseHandle(scope.row.materialId)">{ { scope.row.count}}</el-button>
    		</template>
    	</el-table-column>
    	
    	
    	<table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    	    
    <script>
    	import TableForm from './stockrecorditem-form'
    	import { mapGetters} from 'vuex'
    	export default { 
        data () { 
          return { 
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            addOrUpdateVisible: false
          }
        },
        components: { 
          TableForm
        },
        created () { 
          this.getDataList()
        },
        computed: { 
          ...mapGetters(['permissions'])
        },
        methods: { 
          //库存明细
          queryWarehouseHandle (id) { 
            this.addOrUpdateVisible = true
            this.$nextTick(() => { 
            this.$refs.addOrUpdate.queryWarehouse(id)
          })
        },
      }
    </script>

stockrecorditem-form.vue

// 模态层
    <el-dialog title="库存明细" :visible.sync="dialogWarehouseTableVisible">
      <div class="avue-crud">
        <el-table :data="dataTable" border>
          <el-table-column
            prop="warehouseName"
            header-align="center"
            align="center"
            label="仓库名称">
          </el-table-column>
          <el-table-column
            prop="materialCode"
            header-align="center"
            align="center"
            label="物料编号">
          </el-table-column>
          <el-table-column
            prop="materialName"
            header-align="center"
            align="center"
            label="物料名称">
          </el-table-column>
          <el-table-column
            prop="materialSpecs"
            header-align="center"
            align="center"
            label="规格">
          </el-table-column>
          <el-table-column
            prop="materialBatch"
            header-align="center"
            align="center"
            label="批次">
          </el-table-column>
    
          <el-table-column
            prop="count"
            header-align="center"
            align="center"
            label="库存">
          </el-table-column>
    
        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-dialog>
    
    //通过传入的物料id查询库存明细
    queryWarehouse (id) { 
      this.searchTable.materialId = id || 0
      this.dialogWarehouseTableVisible = true
      fetchCount(this.searchTable).then(response => { 
        this.dataTable = response.data.data.records
        this.totalPage = response.data.data.total
      })
    }

每天get一个小知识点！冲！！  
有问题欢迎大家指出(⁎⁍̴̛ᴗ⁍̴̛⁎)

[20201014152114180.png_pic_center]: /images/20221123/fd86df5da95f43b68fe82a82d5f30b77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1d2f62839031429487e24be21da22590.png