zuobijiance/front/src/component/table.vue

<template>
  <el-table :ref="refName" :data="tableData" class="mainTable" show-overflow-tooltip>
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column type="index" width="66" label="order">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column v-for="(headerItem, headerIndex) in tableHeader" :key="headerItem._id"
      :min-width="headerItem.minWidth" :label="headerItem.label">
      <template #default="scope">
        <template v-if="headerItem.type === 'time'">
          {{ $dayjs(scope.row[headerItem.prop]).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
        <template v-else-if="headerItem.type === 'array'">
          {{ $_.join(scope.row[headerItem.prop], ",") }}
        </template>
        <template v-else-if="headerItem.type === 'password'"> ****** </template>
        <template v-else>
          {{ scope.row[headerItem.prop] }}
        </template>
      </template>
    </el-table-column>
    <el-table-column fixed="right" align="center" label="Operations" width="110">
      <template #default="scope">
        <el-button link type="primary" text @click="detailInfo(scope.row)">
          <el-icon>
            <InfoFilled />
          </el-icon>
        </el-button>
        <el-button link type="primary" text @click="editInfo(scope.row)">
          <el-icon>
            <Edit />
          </el-icon>
        </el-button>
        <el-button link type="primary" text @click="updateMima(scope.row)">
          <el-icon>
            <WalletFilled />
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "app",
  emits: ["detailInfo", "editInfo"],
  props: {
    refName: {
      typeof: String,
      default: "table",
    },
    tableHeader: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
    tableData: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  async mounted() { },
  methods: {
    detailInfo(item) {
      this.$emit("detailInfo", item);
    },
    editInfo(item) {
      this.$emit("editInfo", item);
    },
    updateMima(item) {
      this.$emit("updateMima", item);
    }
  },
  watch: {},
  computed: {},
};
</script>
<style scoped>
.mainTable {
  height: calc(100vh - 112px);
  width: 100%;
}

.pagination {
  justify-content: right;
}
</style>