引入vxe table组件

Zhu Zhonghua

2025-04-08 b7b74869c95ff2605f06ea59727ea31691011127

引入vxe table组件

 package.json

@@ -34,7 +34,9 @@
    "vue": "3.4.31",
    "vue-cropper": "1.1.1",
    "vue-router": "4.4.0",
    "vuedraggable": "4.1.0"
    "vuedraggable": "4.1.0",
    "vxe-pc-ui": "4.5.15",
    "vxe-table": "4.12.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "5.0.5",

 src/components/HxlhTable/index.vue

@@ -94,7 +94,7 @@
page: {
    type: Object,
    default: function() {
    return null
        return null
    }
},
checkboxConfig: {
@@ -137,7 +137,7 @@

const tableForm = ref([]);

const height = ref(document.documentElement.clientHeight - 94.5 + "px;")
const height = ref(document.documentElement.clientHeight - 120 + "px;")
// const url = computed(() => props.src)
const emit = defineEmits();

@@ -198,15 +198,14 @@
  if (!props.page) {
    return;
  }
  console.log(props.page);
  console.log(props.page.total);
  return {
    total: props.page.total,
    currentPage: props.page.current,
    pageSize: props.page.size,
    align: 'left',
    pageSizes: [10, 20, 50, 100, 500],
    layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
    perfect: true
    layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']
  };
});

@@ -217,7 +216,7 @@

</script>

<style lang="less">
<style lang="scss">
  .hxlh-table .vxe-toolbar .vxe-tools--operate {
    margin-top: -23px;
  }

 src/main.js

@@ -43,9 +43,10 @@
// 字典标签组件
import DictTag from '@/components/DictTag'
// vxe-table
import 'xe-utils';
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'


const app = createApp(App)
@@ -83,6 +84,6 @@
  // 支持 large、default、small
  size: Cookies.get('size') || 'default'
})
app.use(VXETable)

app.use(VxeUIAll)
app.use(VxeUITable)
app.mount('#app')

 src/views/system/hxlhTable/index.vue

@@ -1,5 +1,5 @@
<template>
    <div id="view">
    <div class="app-container">
        <el-row>
            <el-col :span="24">
                <div slot="header" class="clearfix">