vue3 封装 el-table 支持嵌套 + render + json 配置

最新推荐文章于 2024-08-01 14:08:25 发布

(´ꑣ｀)走啊，去学习

最新推荐文章于 2024-08-01 14:08:25 发布

阅读量1.3k

点赞数

文章标签： json vue.js javascript

本文链接：https://blog.csdn.net/weixin_44180190/article/details/126609177

版权

本文档介绍如何在Vue3中封装EL-Table组件，实现嵌套表格、自定义渲染及通过JSON配置进行动态设置。通过示例代码展示vue文件、useConfig.js和useTableCommon.js中的关键hook代码。

摘要由CSDN通过智能技术生成

index.vue

<script setup>
import {
    onMounted, ref, nextTick, onUnmounted } from "vue";
import TableTemplate from "./tableTemplate.vue";

const props = defineProps({
   
  tableData: {
   
    type: Array,
    default: () => [],
  },
  tableConfig: {
   
    type: Object,
    default: () => {
   },
  },
  tableColumnConfig: {
   
    type: Array,
    require: true,
    default: () => [],
  },
  minusPart: {
   
    type: Number,
    default: () => 0,
  },
  minTableHeight: {
   
    type: Number,
    default: () => 0,
  },
});

// 表格高度
const tableHeight = ref(0);
const getTableHeight = () => {
   
  nextTick(() => {
   
    tableHeight.value = window.innerHeight - props.minusPart;
  });
};
const xTable = ref();
// 导出子组件Ref
defineExpose({
   
  xTable,
});
// 组件加载完成
onMounted(() => {
   
  getTableHeight();
  window.addEventListener("resize", getTableHeight);
});
// 组件移除
onUnmounted(() => {
   
  window.removeEventListener("resize", getTableHeight);
});
</script>
<template>
  <div
    class="x-table"
    :style="minTableHeight ? `height: calc(100% - ${minTableHeight}px)` : ''"
  >
    <el-table
      ref="xTable"
      :data="tableData"
      v-bind="$attrs"
      :max-height="tableHeight"
    >
      <!-- 多选列 -->
      <template
        v-if="tableConfig.selection"
        :align="selectionAlign"
        :header-align="selectionHeaderAlign"
      >
        <el-table-column
          type="selection"
          :width="tableConfig.selectionWidth || 40"
          :fixed="tableConfig.selectionFixed || null"
        ></el-table-column>
      </template>
      <!-- 序号列 -->
      <template
        v-if="tableConfig.index"
        :align="indexAlign"
        :header-align="indexHeaderAlign"
      >
        <el-table-column
          type="index"
          :width="tableConfig.indexWidth || 50"
          :label="tableConfig.indexLabel || '序号'"
          :fixed="tableConfig.indexFixed || null"
        ></el-table-column>
      </template>
      <!-- 循环列 -->
      <template v-for="(item, index) in tableColumnConfig">
        <!-- 试验插槽 -->
        <el-table-column
          v-if="item.scope"
          :label="item.label || ''"
          :width="item.width || ''"
          :min-width="item.minWidth || ''"
          :align="item.align || 'left'"
          :header-align="item.headerAlign || 'left'"
        >
          <template #default="scope">
            <slot
              :name="item.scope"
              :data="{ scope: scope.row, index: scope.$index }"
            ></slot>
          </template>
        </el-table-column>
        <TableTemplate
          :tableColumConfig="item"
          v-bind="$attrs"
          v-else="!item.scope"
        ></TableTemplate>
      </template>
    </el-table>
  </div>
</template>
<style lang="scss">
.x-table {
   
  .cell {
   
    padding: 0 10px !important;
    line-height: 35px !important;
  }
  th {
   
    background: rgb(240, 242, 245) !important;
    font-size: 13px;
    color: #333333;
    padding: 6px