supply-front/src/views/supply/policy/components/common/table_info.vue

<!--
 * @Descripttion: 不考虑任何扩展性功能，只实现数据动态
 * @version: 1.0.0
 * @Author: Howie
 * @Date: 2022-06-20 20:21:07
 * @LastEditors: howie
 * @LastEditTime: 2022-06-21 10:32:48
-->
<template>
  <div>
    <div class="screen-container">
      <slot name="header">
        <el-radio-group v-model="tab" style="margin-bottom: 30px" size="small">
          <el-radio-button
            v-for="(item, index) in tabs"
            :key="index"
            :label="item.label"
            >{{ item.text }}</el-radio-button
          >
        </el-radio-group>
      </slot>
    </div>
    <div class="mymain-container">
      <el-table
        v-loading="listLoading"
        :data="dataList"
        element-loading-text="Loading"
        border
        fit
        show-summary
        highlight-current-row
        stripe
      >
        <template v-for="col in columns">
          <el-table-column
            align="center"
            :label="col.lable"
            :prop="col.prop"
            :min-width="col.widht"
            show-overflow-tooltip
          >
          </el-table-column>
        </template>
        <!-- <el-table-column
          align="center"
          fixed="right"
          label="操作"
          min-width="160"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="hanleEdit(scope.row)"
              >审批</el-button
            >
            <el-button type="text" size="small" @click="hanleDateil(scope.row)"
              >退订</el-button
            >
            <el-button type="text" size="small" @click="hanleDateil(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <Common />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listLoading: {
      // table 加载loading
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array,
      default: [], // table 数据
    },
    columns: {
      type: Array,
      default: [], // table的label和prop
    },
    tabs: {
      type: Array,
      default: [
        {
          label: "details",
          text: "详情",
        },
        {
          label: "record",
          text: "操作记录",
        },
      ],
    },
  },
  data() {
    return {
      tab: "",
    };
  },
  methods: {
    getList() {},
  },
};
</script>

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