vue3 elementplus el-table 组件化 插槽

组件

<template>
  <div class="result-table">
    <el-table
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      :data="tableData"
      :height="height"
    >
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="60px"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        :label="item.label"
        :width="item.width"
        :prop="item.key"
        v-for="(item, index) in tableHeader"
        :key="index"
      >
        <template v-slot="scope" v-if="item.slot">
          <slot :name="item.slot" :row="scope.row" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  tbHeader: {
    type: Array,
    required: false,
  },
  tbData: {
    type: Array,
    required: false,
  },
  height: {
    type: String,
    required: false,
  },
});
let loading = ref(false);
let height = props.height;
let tableHeader = props.tbHeader;
let tableData = props.tbData;
</script>

<style lang="scss" scoped>
.result-table {
  ::v-deep {
    .el-table {
      color: #ffffff;
      background-color: transparent !important;
    }

    .el-table tr {
      background: rgba(33, 78, 137, 0.15) !important;
    }

    .el-table tr:nth-child(2n) {
      background: rgba(33, 78, 137, 0.3) !important;
    }

    .el-table th.el-table__cell {
      color: #d8f4fa;
      background: rgba(33, 78, 137, 0.8) !important;
      border-bottom: none !important;
    }

    .el-table td.el-table__cell {
      border-bottom: none !important;
    }

    .el-table tr:hover td.el-table__cell {
      border-bottom: none !important;
      background: rgba(33, 78, 137, 0.8) !important;
    }

    .el-table--border .el-table__inner-wrapper::after,
    .el-table--border::after,
    .el-table--border::before,
    .el-table__inner-wrapper::before {
      display: none;
    }
  }
}
</style>

使用

        <Table
          :tbData="tbData"
          :tbHeader="tbHeader.label"
          :height="tbHeader.height"
        >
          <template v-slot:positioning="data">
            <img
              src="@/assets/images/positioning.png"
              alt=""
              style="height: 16px; cursor: pointer"
              @click="locat(data)"
            />
          </template>
          <template v-slot:state="data">
            {{ getLabelWithDict(shebei_status, data.row.state) }}
          </template>
          <template v-slot:gas_hiddan_type="data">
            {{ getLabelWithDict(gas_hiddan_type, data.row.type) }}
          </template>
          <template v-slot:gas_hiddan_level="data">
            {{ getLabelWithDict(gas_hiddan_level, data.row.level) }}
          </template>
          <template v-slot:risk_type="data">
            {{ getLabelWithDict(risk_type, data.row.type) }}
          </template>
          <template v-slot:risk_level="data">
            {{ getLabelWithDict(risk_level, data.row.level) }}
          </template>
        </Table>

label

let tableHeader = ref({
  risk: {
    label: [
      {
        key: "pipelineId",
        label: "风险编号",
        width: "",
      },
      {
        key: "type",
        label: "风险类型",
        width: "",
        slot:"risk_type"
      },
      {
        key: "legendField",
        label: "风险等级",
        width: "",
        slot:"risk_level"
      },
      {
        key: "name",
        label: "管段名称",
        width: "",
      },
      // {
      //   key: "",
      //   label: "操作",
      //   width: "60px",
      //   slot: "positioning",
      // },
    ],
    height: "150px",
  },
  hidden: {
    label: [
      {
        key: "pipelineId",
        label: "隐患编号",
        width: "",
      },
      {
        key: "type",
        label: "隐患类型",
        width: "",
        slot:"gas_hiddan_type"
      },
      {
        key: "legendField",
        label: "隐患等级",
        width: "",
        slot:"gas_hiddan_level"
      },
      {
        key: "name",
        label: "关联管段",
        width: "",
      },
      // {
      //   key: "",
      //   label: "操作",
      //   width: "60px",
      //   slot: "positioning",
      // },
    ],
    height: "150px",
  },
});