vue element表格封装

1、组件

<!--
 * @Descripttion: Element Ui Table 表格二次封装
 * @version: 
 * @Author: ras
 * @Date: 2024-02-04
 * @LastEditors: ras
 * @LastEditTime: 2024-02-04
 -->
<template>
  <div>
    <el-table
      ref="dataTable"
      :data="tableData"
      style="width: 100%"
      size="mini"
      stripe
      :height="height"
      highlight-current-row
      @selection-change="selectLine"
    >
      <!-- 多选框 -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
        :align="align"
      ></el-table-column>
      <!-- 文本数据渲染 -->
      <template v-for="item in tableHead">
        <el-table-column
          v-if="item.columnType === 'slot'"
          :prop="item.field"
          :label="item.label"
          :key="item.field"
          :width="item.width"
          :align="align"
          :sortable='item.sortable'
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope" />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :prop="item.field"
          :label="item.label"
          :key="item.field"
          :width="item.width"
          :align="align"
          :sortable='item.sortable'
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "e-table",
  components: {},
  /**
   * @name:
   * @test: test font
   * @msg:
   * @param {
   *  接收参数:
   *      tableHeadConfig           列的名称、接收值     |     Array
   *        label         列的名称                      |     String
   *        field         列的对应值                    |     String
   *        columnType    定义当前列为插槽    |   slot   |     String
   *        slotName      定义当前列插槽的名字           |     String
   *        width         定义当前列的宽度               |     String
   *        sortable      定义列是否排序                 |     Boolean
   *  示例：配置
   *      tableHeadConfig:[
   *              {
   *                label       : "缩略图",
   *                field       : "skuName",
   *                columnType  : "slot",
   *                slotName    : "thumbnail",
   *                width       : 240
   *              }
   *            ]
   *
   *      tableLoadData     异步获取的table文本数据信息
   *      align             表格单元格内容排列顺序      left|center|right
   *      selection         表格是否可多选
   *      height            表格默认撑开高度
   *  事件：
   *      获取当前选中行
   *      调用页面用  @selectLine="xxx" 进行监听处理
   * }
   * @return:
   */
  props: {
    tableHeadConfig: {
      type: Array,
      default: () => {
        return [
          {
            label: "skuId",
            field: "skuId",
          },
          {
            label: "商品名称",
            field: "skuName",
          },
          {
            label: "缩略图",
            columnType: "slot",
            slotName: "thumbnail",
          },
          {
            label: "库存数量",
            field: "onStockNum",
          },
          {
            label: "码类型",
            field: "hasUniCode",
          },
          {
            label: "状态",
            field: "status",
            columnType: "slot",
            slotName: "status",
          },
          {
            label: "操作",
            columnType: "slot",
            slotName: "operation",
          },
        ];
      },
    },
    tableLoadData: {
      type: Array,
      default: () => {
        return [
          {
            skuId: "111",
            skuName: "222",
          },
        ];
      },
    },
    align: {
      type: String,
      default: "center",
    },
    selection: {
      type: Boolean,
      default: false,
    },
    height: {
      type: [Number, String],
    //   default: 600,
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    selectLine() {
      if (
        this.$refs.dataTable.selection &&
        this.$refs.dataTable.selection.length > 0
      ) {
        this.$emit("selectLine", this.$refs.dataTable.selection);
      }
    },
  },
  computed: {
    tableData() {
      return this.tableLoadData;
    },
    tableHead() {
      return this.tableHeadConfig;
    },
  },
};
</script>

2、使用

<template>
  <div class="container">
    <!-- 封装的elememt表格组件 -->
    <e-table :tableHeadConfig="tableHeadConfig" :tableLoadData="tableData">
      <template v-slot:operation="slotData">
        <el-button
          type="primary"
          size="mini"
          @click="jumpuserdetail(slotData.data.row)"
          >用户详情</el-button
        >
      </template>
      <template v-slot:imgurl="slotData">
        <img
          :src="
            slotData.data.row.avatar_url == null
              ? 'https://img.zcool.cn/community/01dc1b58ae3d6ca801219c77314f09.png@2o.png'
              : slotData.data.row.avatar_url
          "
          style="width: 35px; border-radius: 50%"
          alt=""
        />
      </template>
      <template v-slot:nickname="slotData">
        <span>{{
          slotData.data.row.nickname == null
            ? "未授权用户"
            : slotData.data.row.nickname
        }}</span>
      </template>
      <template v-slot:openid="slotData">
        <a
          @click="copyUrl(slotData.data.row.openid)"
          style="color: rgba(27, 108, 232, 100)"
          >复制openid</a
        >
      </template>
    </e-table>
  </div>
</template>

<script>
import eTable from "@/components/table.vue";
export default {
  data() {
    return {
      tableHeadConfig: [
        {
          label: "ID",
          field: "id", //列的对应值
        },
        {
          label: "用户",
          columnType: "slot", //定义当前列为插槽
          slotName: "imgurl", //定义当前列插槽的名字
        },
        {
          label: "用户名",
          columnType: "slot",
          slotName: "nickname",
        },
        {
          label: "OpenId",
          columnType: "slot",
          slotName: "openid",
        },
        {
          label: "创建时间",
          field: "created_at",
          sortable: true, //定义当前列的排序
        },
        {
          label: "操作",
          columnType: "slot",
          slotName: "operation",
          width: 260,
        },
      ],
      tableData: [
        {
          id: 1,
          nickname: "张三",
          Machine_test_one: 99,
          written_examination_one: 89,
          Machine_test_two: 77,
          Machine_test_three: 69,
          written_examination_two: 84,
          Machine_test_four: 82,
        },
      ],
    };
  },
  methods: {},
  components: {
    eTable
  },
};
</script>

 3、页面效果