vxe-table

<template>
  <div class="app">
    <el-button plain @click="dialogVisible = true"> Click to open the Dialog </el-button>

    <el-dialog v-model="dialogVisible" title="Tips" width="80%" :before-close="handleClose">
      <vxe-table
        border="inner"
        ref="tableRef"
        :column-config="columnConfig"
        :tree-config="treeConfig"
        :tooltip-config="tooltipConfig"
        :header-tooltip-config="headerTooltipConfig"
        :data="tableData"
      >
        <vxe-column field="name" title="Name" tree-node></vxe-column>
        <vxe-column align="center" field="size" title="Size"></vxe-column>
        <vxe-column align="center" field="type" title="Type"></vxe-column>
        <vxe-column align="center" field="date" title="Date"></vxe-column>
      </vxe-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";

const dialogVisible = ref(false);

const handleClose = () => {};

const tableData = [
  { id: 10000, parentId: null, name: "Test1", type: "mp3", size: 1024, date: "2020-08-01" },
  { id: 10050, parentId: null, name: "Test2", type: "mp4", size: 0, date: "2021-04-01" },
  { id: 24300, parentId: 10050, name: "Test3", type: "avi", size: 1024, date: "2020-03-01" },
  { id: 20045, parentId: 24300, name: "Test4", type: "html", size: 600, date: "2021-04-01" },
  { id: 10053, parentId: 24300, name: "Test5", type: "avi", size: 0, date: "2021-04-01" },
  { id: 24330, parentId: 10053, name: "Test6", type: "txt", size: 25, date: "2021-10-01" },
  { id: 21011, parentId: 10053, name: "Test7", type: "pdf", size: 512, date: "2020-01-01" },
  { id: 22200, parentId: 10053, name: "Test8", type: "js", size: 1024, date: "2021-06-01" },
  { id: 23666, parentId: null, name: "Test9", type: "xlsx", size: 2048, date: "2020-11-01" },
  { id: 23677, parentId: 23666, name: "Test10", type: "js", size: 1024, date: "2021-06-01" },
  { id: 23671, parentId: 23677, name: "Test11", type: "js", size: 1024, date: "2021-06-01" },
  { id: 23672, parentId: 23677, name: "Test12", type: "js", size: 1024, date: "2021-06-01" },
  { id: 23688, parentId: 23666, name: "Test13", type: "js", size: 1024, date: "2021-06-01" },
  { id: 23681, parentId: 23688, name: "Test14", type: "js", size: 1024, date: "2021-06-01" },
  { id: 23682, parentId: 23688, name: "Test15", type: "js", size: 1024, date: "2021-06-01" },
  { id: 24555, parentId: null, name: "Test16", type: "avi", size: 224, date: "2020-10-01" },
  { id: 24566, parentId: 24555, name: "Test17", type: "js", size: 1024, date: "2021-06-01" },
  { id: 24577, parentId: 24555, name: "Test18", type: "js", size: 1024, date: "2021-06-01" },
];
const columnConfig = {
  resizable: true,
};
const treeConfig = {
  transform: true,
  rowField: "id",
  parentField: "parentId",
  iconOpen: "vxe-icon-square-minus",
  iconClose: "vxe-icon-square-plus",
};
const tooltipConfig = {
  showAll: true,
  enterable: true,
  contentMethod: ({ column, row }) => {
    const { field } = column;
    // 重写默认的提示内容
    if (field === "date" || field === "rate") {
      return `自定义单元格：${row[field]}`;
    }
    // 其余的单元格使用默认行为
    return null;
  },
};

const headerTooltipConfig = {
  showAll: true,
  enterable: true,
  contentMethod: ({ column }) => {
    const { field, title } = column;
    // 重写默认的提示内容
    if (field === "date" || field === "rate") {
      return `自定义表头：${title}`;
    }
    // 其余的单元格使用默认行为
    return null;
  },
};
</script>

<style lang="less" scoped>
.app {
  padding: 10px;
}
</style>

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import "./assets/index.less";

import VxeUIBase from "vxe-pc-ui";
import "vxe-pc-ui/es/style.css";

import VxeUITable, { VxeUI } from "vxe-table";
import "vxe-table/es/style.css";

VxeUI.setConfig({
  zIndex: 9999,
});

const app = createApp(App);

import { createStore } from "vuex";
// const store_1 = createStore();
// const store_2 = createStore();
// console.log(store_1 == store_2); // false

app.use(createPinia());
app.use(router);
app.use(ElementPlus);
app.use(VxeUIBase).use(VxeUITable);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.mount("#app");