封装el-table

vue3封装table表格

1.父文件

         <statefulSets
            :columns="columns"
            ref="arrangeRef"
          >
            <template v-slot:header> Deployments </template>
          </statefulSets>
   <script lang="ts">
    import { defineComponent, ref, h, watch, nextTick } from "vue";      
     const columns = [
      {
        label: 'Name',
        prop: "name",
      },
      {
        label: "Namespace",
        prop: "namespace",
      },
      {
        label: "Pods",
        prop: "podInfo",
        render: (row) => {
          return h(
            "span",
            {
              style: " cursor: pointer; display: block;padding:10px;",
            },
            `${row.podInfo.running + "/" + row.podInfo.current}`
          );
        },
      },
            {
        label: "Containers",
        prop: "containerNames",
      },
]

子组件

<template>
  <div>
    <div class="parent">
      <slot name="header"></slot>
    </div>
    <div class="custom-wrapper" style="height: 500px" v-loading="loading">
      <el-table
        :data="tableData"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        style="width: 100%; height: 100%; overflow-y: auto"
        @selection-change="tableItemSelect"
        ref="tableRef"
        row-key="uid"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          v-for="(item, i) in columns"
          :prop="item.prop"
          :key="i"
          :label="item.label"
          :sortable="item.sort ? 'custom' : false"
          :width="`${item.width}px`"
        >
          <template #default="{ row }" v-if="item.render">
            <v-nodes :render="item.render(row)" />
          </template>
          <template
            #default="{ row }"
            v-else-if="item.prop === 'containerNames'"
          >
            <el-select
              v-model="row.container"
              placeholder="Select a container"
              size="small"
              multiple
            >
              <el-option
                v-for="container in row.containerNames"
                :key="container"
                :label="container"
                :value="container"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
import VNodes from "@/components/cluster-management/cluster-detail/VNodes.vue";

export default defineComponent({
  name: "common-table",
  emits: ["tableItemSelect", "refreshSelection"],
  components: { VNodes },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    url: {
      type: String,
      default: "",
    },
  },
  setup(props, ctx) {
    const tableRef = ref();

    const tableData = ref([
      {
        id: "1",
        date: "2016-05-03",
        name: "Tom",
        namespace: "No. 189, Grove St, Los Angeles",
        podInfo: {
          current: 1,
          running: 1,
        },
        containerNames: ["alertmanager", "config-reloader"],
      },
      {
        id: "2",
        date: "2016-05-02",
        name: "Tom",
        namespace: "No. 189, Grove St, Los Angeles",
        podInfo: {
          current: 1,
          running: 1,
        },
        containerNames: ["alertmanager", "config-reloader"],
      },
      {
        id: "3",
        date: "2016-05-04",
        name: "Tom",
        namespace: "No. 189, Grove St, Los Angeles",
        podInfo: {
          current: 0,
          running: 1,
        },
        containerNames: ["alertmanager", "config-reloader"],
      },
      {
        id: "4",
        date: "2016-05-01",
        name: "Tom",
        namespace: "No. 189, Grove St, Los Angeles",
        podInfo: {
          current: 1,
          running: 4,
        },
        containerNames: ["alertmanager", "config-reloader"],
      },
    ]);
    const selectValArr: any = ref([]);
    const tableItemSelect = (val) => {
      selectValArr.value = val;
      ctx.emit("tableItemSelect", selectValArr.value);
    };
    const toggleSelection = (rows) => {
      // 选中值回显
      setTimeout(() => {
        nextTick(() => {
          tableData.value.forEach((row) => {
            tableRef.value.toggleRowSelection(row, rows.includes(row.id));
          });
        });
      }, 500);
    };

    return {
      tableData,
      tableRef,
      toggleSelection,
      tableItemSelect,
    };
  },
});
</script>

<style lang="scss" scoped>
.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

VNodes.vue
// 优化h函数

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "VNodes",
    props: {
        render: [Array, Object],
    },
    render() {
        return this.render;
    },
});
</script>