my-lib

Vue 3 + Element Plus 的 BaseTable 组件库示例（单组件版）

📦 安装

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import MyLib from 'vue3-components-wx'

const app = createApp(App)
app.use(ElementPlus)
app.use(MyLib)  // 全局注册 BaseTable
app.mount('#app')
//按需导入
import { BaseTable } from 'vue3-components-wx'




 <template>
    <BaseTable :column="column" ref="tableRef" :loading="loading" :show-overflow-tooltip="true" :tableData="tableData"
        :selectionChange="selectionChange">
        <template #toolButton>
            <el-button type="primary" @click="getSelection">获取选中数据</el-button>
        </template>
        <template #operate="scope">
            <el-button @click="detailClick(scope.row)" :text="true" type="primary">查 看</el-button>
        </template>
    </BaseTable>
</template>
<script setup>
import { ref, onMounted } from "vue";

const loading = ref(false)
const tableData = ref()
const tableRef = ref()
const column = ref([
    {
        type: 'selection',
        width: 55,
        align: 'left'
    }, {
        label: 'name',
        prop: 'name'
    }, {
        label: '操作',
        prop: 'operate'
    }
])
const selectionChange = (selection) => {
    console.log('selection', selection)
}
const getSelection = () => {
    console.log('selectionRows', tableRef.value.$refs.table.getSelectionRows())
}
const detailClick = (row) => { 
    console.log('row', row) 
}
const getList = () => {
    loading.value = true
    setTimeout(() => {
        tableData.value = [{name: 111},{name:222}]
        loading.value = false
    })
}
onMounted(() => {
    getList()
})