vue3 elementPlus table skeleton 表格加載狀態的骨架屏

之前用empty 插槽實現 不夠簡潔

全網搜索只有一個 elementui 的(vue2)

https://github.com/kangyonggan/vue-elementui-skeleton

 

扒下來改了下 

原版是js的 這里換成ts了

// skeletonDirective.ts

import type { App, VNode } from 'vue'
/** 配置 */
interface ISkeletonOption {
    /** 指令名 */
    directiveName: string
    /** 行數 */
    rows: number
    /** 圓角 */
    radius: number
    /** 背景顏色 */
    bg: string
}
export default {
    install: (Vue: App, opts?: ISkeletonOption) => {
        // #38BB8F
        // #eaebed
        // #74CFB1
        opts ??= { directiveName: 'skeleton', rows: 5, radius: 5, bg: '#eaebed' }
        Vue.directive(opts?.directiveName, {
            updated(el: HTMLElement, binding, vnode) {
                let { value } = binding
                if (typeof value !== 'object') {
                    value = { loading: value }
                }
                // loading為true並且el的data-skeleton="0"或者空的時候畫骨架
                if (value.loading && (!el.dataset.skeleton || el.dataset.skeleton === '0')) {
                    el.dataset.skeleton = '1'
                    // el-table（自識別：寬度、列數、行高。可配置：行數、圓角、背景色）
                    if (el.classList.contains('el-table')) {
                        // 隱藏空數據提示
                        const totalWidth = el.clientWidth
                        const emptyText = el.querySelector('.el-table__empty-block') as HTMLElement
                        if (emptyText) {
                            emptyText.style.display = 'none'
                        }

                        // 計算每一列的寬度
                        const colsWidth = []
                        let usedWidth = 0
                        let freeCount = 0
                        /** vnode.children[0].children[0].children[0]  這個路徑.... */
                        const [children] = (vnode.children as any)[0].children[0].children as VNode[]
                        /** 過濾出表頭 */
                        const Columns = (children.children as VNode[]).filter((e: any) => e.type.name == 'ElTableColumn')
                        for (let i = 0; i < Columns.length; i++) {
                            const item = Columns[i] as any
                            colsWidth.push(item.component.propsOptions.width * 1)
                            if (item.component.propsOptions.width) {
                                usedWidth += item.component.propsOptions.width * 1
                            } else {
                                freeCount++
                            }
                        }

                        // 沒指定寬度的列寬 = (總寬 - 已指定的列寬總和) / 未指定列寬的個數
                        const autoWidth = (totalWidth - usedWidth) / freeCount
                        for (let i = 0; i < colsWidth.length; i++) {
                            if (!colsWidth[i]) {
                                colsWidth[i] = autoWidth
                            }
                        }

                        // 在tbody中畫骨架
                        const tbody = el.querySelector('.el-table__body tbody')
                        if (tbody) {
                            // 行數（缺省為5）
                            const rows = value.rows || opts?.rows
                            // 骨架屏背景色（缺省為#eaebed）
                            const bg = value.bg || opts?.bg
                            // 圓角（缺省為5）
                            const radius = value.radius || opts?.radius
                            for (let i = 0; i < rows; i++) {
                                const tr = document.createElement('tr')
                                tr.className = 'skeleton-tr el-table__row is-animated'
                                for (let j = 0; j < colsWidth.length; j++) {
                                    const td = document.createElement('td')
                                    td.className = 'cell'
                                    const div = document.createElement('div')
                                    div.style.lineHeight = '15px'
                                    div.style.margin = '8px 0'
                                    div.style.background = bg
                                    div.style.borderRadius = `${radius}px`
                                    div.style.textIndent = '-999px'

                                    /** 隨機寬度*/
                                    div.style.width = `${Math.random() * 60 + 30}%`

                                    div.appendChild(document.createTextNode('.'))
                                    td.appendChild(div)
                                    tr.appendChild(td)
                                }
                                tbody.appendChild(tr)
                            }
                        }
                    }
                } else if (!value.loading && el.dataset.skeleton === '1') {
                    // loading為false並且el的data-skeleton="1"的時候刪除骨架
                    el.dataset.skeleton = '0'

                    // el-table
                    if (el.classList.contains('el-table')) {
                        const allSkeletons = el.querySelectorAll('.skeleton-tr')
                        const tbody = el.querySelector('.el-table__body tbody') as HTMLElement
                        for (let i = 0; i < allSkeletons.length; i++) {
                            tbody.removeChild(allSkeletons[i])
                        }
                        const emptyText = el.querySelector('.el-table__empty-block') as HTMLElement
                        if (emptyText) {
                            emptyText.style.display = 'block'
                        }
                    }
                }
            }
        })

    }
}

用法 全局導入

// main.ts
import skeletonDirective from '/@/****/skeletonDirective'


app.use(skeletonDirective)

vue模板中

<el-table v-skeleton="loading">
    <el-table-column label="xxx"/>
    <el-table-column label="xxx"/>
</el-table>


<el-table v-skeleton="{loading:loading,rows:10}">
    <el-table-column label="xxx"/>
    <el-table-column label="xxx"/>
</el-table>

 

效果如下

 

也可以用 empty插槽實現

<el-table class="my-table">
     <el-table-column label="xxx"/>
      <el-table-column label="xxx"/>

                <template #empty>
                    <el-row v-if="loading" :gutter="20">
                        <el-col v-for="item in 4" :key="item" :span="6">
                            <el-skeleton :rows="5" animated />
                        </el-col>
                    </el-row>
                    <div v-else style="text-align: center;">暫無數據</div>
                </template>

 </el-table>



<!--樣式-->
<style lang='scss' scoped>
.my-table {
    :deep() .el-table__empty-text {
        margin-top: 1rem;
        line-height: 25px;
        text-align: left;
        width: calc(100% - 20px);
    }
    :deep() .el-empty {
        padding-top: 0;
    }
}
</style>

 

 

水平有限,對vnode這玩意一知半解  (學不動了)