lanan-system-vue/src/views/repair/Components/PartChoose.vue

<template>
  <el-select v-model="partSelected" ref="selectTable" clearable style="width: 45rem">
    <el-option style="display: none" v-for="part in partList" :key="part.id" :label="part.name" :value="part.id"/>
    <el-table :data="partList" style="width: 100%" @row-click="handleSelectionChange">
      <el-table-column label="序号" align="center">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name" />
      <el-table-column label="规格" prop="name" />
      <el-table-column label="商品编码" prop="name" />
      <el-table-column label="可用库存" prop="name" />
      <el-table-column label="成本" prop="name" />
      <el-table-column label="仓库" prop="name" />
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
    />
  </el-select>
</template>

<script>
export default {
  name: "PartChoose",
  data(){
    return{
      partSelected: null,
      partList: [
        {id: 1, name: '张胜男', age:20, gender: 1},
        {id: 2, name: '张胜妇', age:20, gender: 1}
      ],
      queryParams:{
        pageNo: 1,
        pageSize: 10
      },
      total: 2
    }
  },
  mounted() {
    this.listPart()
  },
  methods:{
    // TODO 获取商品信息
    async listPart(){

    },
    handleSelectionChange(data){
      this.$emit("selected", data)
      this.$refs.selectTable.blur()
    }
  }
}
</script>

<style scoped lang="scss">
.pagination-container{
  margin: 0 auto !important;
  padding: 0 !important;
}
</style>