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

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

点击库存列查询具体库存信息，弹窗形式显示

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="库存">
		<!-- 根据materialId查询库存信息 -->
		<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一个小知识点！冲！！
有问题欢迎大家指出(⁎⁍̴̛ᴗ⁍̴̛⁎)