10/16

<template>  
    <div>  
      <el-table :data="inventoryRecords" style="width: 100%; margin-top: 20px;">  
        <el-table-column prop="id" label="ID" width="120"></el-table-column>  
        <el-table-column prop="materialName" label="物料名称" width="180"></el-table-column>  
        <el-table-column prop="quantity" label="当前库存" width="150"></el-table-column>  
        <el-table-column prop="status" label="物料状态" width="150"></el-table-column>  
        <el-table-column label="操作" width="120">  
          <template #default="{ row }">  
            <el-button size="mini" type="danger" @click="deleteInventoryRecord(row.id)">删除</el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
    </div>  
  </template>  
  
  <script>  
  export default {  
    data() {  
      return {  
        inventoryRecords: [],  
      };  
    },  
    mounted() {  
      this.loadInventoryData();  
    },  
    methods: {  
      loadInventoryData() {  
        // 模拟加载库存数据  
        this.inventoryRecords = [  
          { id: 1, materialName: '物料A', quantity: 100, status: '正常库存' },  
          { id: 2, materialName: '物料B', quantity: 50, status: '过期期物料' },  
          { id: 3, materialName: '物料C', quantity: 200, status: '冷备货' },  
          { id: 4, materialName: '物料D', quantity: 20, status: '报废物料' },  
        ];  
      },  
      deleteInventoryRecord(id) {  
        this.inventoryRecords = this.inventoryRecords.filter(record => record.id !== id);  
      }  
    }  
  };  
  </script>  
  
  <style scoped>  
  .el-table {  
    margin-top: 20px;  
  }  
  </style>