<template>
  <el-table
    :data="tableData"
    :border="tableConfig.border"
    style="min-width: 800px"
    :size="tableConfig.size"
    :cell-style="tableConfig.cellStyle"
    :header-cell-style="tableConfig.headCellStyle"
    :stripe="tableConfig.stripe"
  >
    <slot name="col"></slot>
    <el-table-column
      v-for="(col, index) in colsData"
      :prop="col.prop"
      :key="col.prop"
      :label="col.label"
      :width="tableConfig.colWidth"
    >
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <slot name="operate">
          <el-button-group>
            <el-button
              style="margin-right: 20px"
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
              >編輯</el-button
            >
            <el-button type="warning" size="small" @click="handleDelete(scope.row)"
              >刪除</el-button
            >
          </el-button-group>
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "rTable",
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    tableConfig: {
      type: Object,
      required: true,
    },
    colsData: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleEdit: function (row) {
      this.$emit("edit",row);
    },
    handleDelete: function (row) {
      this.$emit('delete',row);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped></style>
 

表單配置

//表單配置
      tableConfig: {
        border: true,
        size: 'small',
        cellStyle: {textAlign: 'center'},
        headCellStyle: {textAlign: 'center'},
        stripe: true,
        colWidth: '180'
      },
      labelList: [
        {label: '商品名稱',prop: 'name'},
        {label: '進價',prop: 'incode'},
        {label: '售價',prop: 'expend'},
        {label: '庫存數量',prop: 'number'},
        {label: '商品描述',prop: 'remark'},
        {label: '供應商',prop: 'resource'}
      ],