@netang/quasar 0.1.26 → 0.1.27

package/components/mixed-table/index.vue

@@ -70,6 +70,7 @@
         <q-page-container>
             <q-page>
                 <n-table
+                    ref="tableRef"
                     class="n-table absolute-full"
                     :class="{
                         'n-table--last-fixed': showTableFixed,
@@ -101,13 +102,11 @@
                         v-for="imgName in tableImgNames"
                         v-slot:[`body-cell-${imgName}`]="props"
                     >
-                        <q-td :props="props">
-                            <!-- 缩略图 -->
-                            <n-thumbnail
-                                :src="props.row[imgName]"
-                                preview
-                            />
-                        </q-td>
+                        <!-- 缩略图 -->
+                        <n-thumbnail
+                            :src="props.row[imgName]"
+                            preview
+                        />
                     </template>
 
                     <!-- 插槽 -->
@@ -115,12 +114,10 @@
                         v-for="slotName in slotNames.table"
                         v-slot:[slotName]="props"
                     >
-                        <q-td :props="props">
-                            <slot
-                                :name="slotName"
-                                v-bind="props"
-                            />
-                        </q-td>
+                        <slot
+                            :name="slotName"
+                            v-bind="props"
+                        />
                     </template>
 
                     <!-- 操作 -->
@@ -320,6 +317,9 @@ export default {
             currentTableRowDblclick = $table.tableRowDblclick
         }
 
+        // 表格节点
+        const tableRef = ref(null)
+
         // 树节点
         const treeRef = ref(null)
 
@@ -451,6 +451,8 @@ export default {
             // 解构表格实例
             ...$table,
 
+            // 表格节点
+            tableRef,
             // 树节点
             treeRef,
             // 树筛选值

package/components/table/index.vue

@@ -1,12 +1,68 @@
 <template>
     <q-table
         class="n-table"
+        :columns="columns"
+        :rows="currentRows"
         :virtual-scroll-slice-size="virtualScrollItemSize"
         v-bind="$attrs"
     >
-        <!-- 插槽 -->
+        <!-- 展开子数据插槽 -->
         <template
-            v-for="slotName in slotNames"
+            v-slot:[slotNames.expandName]="props"
+            v-if="hasChildren"
+        >
+            <q-td
+                class="row no-wrap items-center "
+                :style="{ paddingLeft: (meta[props.key].level * 16) + 'px' }"
+                :props="props"
+            >
+                <!-- 旋转器 -->
+                <q-spinner
+                    class="q-tree__spinner q-ml-sm"
+                    :color="iconColor"
+                    v-if="meta[props.key].lazy === 'loading'"
+                />
+
+                <!-- 箭头 -->
+                <template v-else>
+                    <q-icon
+                        class="q-tree__arrow q-ml-sm"
+                        :name="computedIcon"
+                        :color="iconColor"
+                        :class="`${meta[props.key].expanded ? 'q-tree__arrow--rotate' : ''}`"
+                        @click="onExpandClick(props, $event)"
+                        v-if="meta[props.key].isParent || meta[props.key].lazy === true"
+                    />
+                    <span class="q-icon n-table__arrow-noop q-ml-sm" v-else></span>
+                </template>
+
+                <!-- 如果有插槽 -->
+                <slot
+                    :name="slotNames.expandName"
+                    v-bind="props"
+                    v-if="slotNames.hasExpandSlot"
+                />
+                <!-- 否则显示值 -->
+                <span v-else>{{getCellValue(props.col, props.row)}}</span>
+            </q-td>
+        </template>
+
+        <!-- 单元格插槽 -->
+        <template
+            v-for="slotName in slotNames.bodyCell"
+            v-slot:[slotName]="props"
+        >
+            <q-td :props="props">
+                <slot
+                    :name="slotName"
+                    v-bind="props"
+                />
+            </q-td>
+        </template>
+
+        <!-- 其他插槽 -->
+        <template
+            v-for="slotName in slotNames.other"
             v-slot:[slotName]="props"
         >
             <slot
@@ -14,13 +70,19 @@
                 v-bind="props"
             />
         </template>
+
     </q-table>
 </template>
 
 <script>
-import { computed } from 'vue'
+import { ref, watch, computed, getCurrentInstance, nextTick } from 'vue'
+import { stopAndPrevent } from 'quasar/src/utils/event'
+
+import $n_has from 'lodash/has'
 
-import $n_isValidObject from '@netang/utils/isValidObject'
+import $n_isValidArray from '@netang/utils/isValidArray'
+import $n_indexOf from '@netang/utils/indexOf'
+import $n_forIn from '@netang/utils/forIn'
 
 export default {
 
@@ -33,32 +95,418 @@ export default {
      * 声明属性
      */
     props: {
+        // 行数据
+        rows: {
+            type: Array,
+            default: () => []
+        },
+        // 定义每一行的唯一键的每一行属性
+        rowKey: {
+            type: [ String, Function ],
+            default: 'id'
+        },
+        // 头部列数据
+        columns: Array,
+        // 已展开数据数组
+        expanded: Array, // v-model:expanded
         // 以像素为单位的默认行大小
         virtualScrollItemSize: {
             type: [ Number, String ],
             default: 50,
         },
+
+        // 【覆盖声明】-------------------------------------------------------
+
+        // 是否默认展开所有行, 当 Table 包含展开行存在或者为树形表格时有效
+        defaultExpandAll: Boolean,
+        // 子数据属性名称
+        childrenKey: {
+            type: String,
+            default: 'children'
+        },
+        icon: String,
+        iconColor: {
+            type: String,
+            default: 'grey'
+        },
     },
 
     /**
      * 组合式
      */
-    setup(props, { slots }) {
+    setup(props, { slots, emit }) {
+
+        const { proxy } = getCurrentInstance()
+        const { $q } = proxy
+
+        // 懒加载
+        const lazy = ref({})
+        // 已展开节点数组
+        const innerExpanded = ref(props.expanded || [])
 
         // ==========【计算属性】==========================================================================================
 
+        /**
+         * 获取每一行的唯一键的每一行属性
+         */
+        const getRowKey = computed(() => (
+            typeof props.rowKey === 'function'
+                ? props.rowKey
+                : row => row[ props.rowKey ]
+        ))
+
+        /**
+         * 图标
+         */
+        const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
+
+        /**
+         * 是否有子数据
+         */
+        const hasChildren = computed(function() {
+            if (
+                $n_isValidArray(props.rows)
+                && $n_isValidArray(props.columns)
+                && props.columns[0].name
+            ) {
+                for (const item of props.rows) {
+                    // 如果有子数据
+                    if (
+                        $n_has(item, props.childrenKey)
+                        && $n_isValidArray(item[props.childrenKey])
+                    ) {
+                        return true
+                    }
+                }
+            }
+            return false
+        })
+
+        /**
+         * meta
+         */
+        const meta = computed(function () {
+
+            const meta = {}
+
+            function travel(row, level, parent) {
+
+                // 唯一键值
+                const key = getRowKey.value(row)
+                // 是否为父级
+                const isParent = $n_has(row, props.childrenKey) && $n_isValidArray(row[props.childrenKey])
+                // 是否可展开
+                // const expandable = row.expandable !== false
+
+                // 懒加载
+                let localLazy = row.lazy
+                if (
+                    localLazy === true
+                    && lazy.value[ key ] !== void 0
+                    && Array.isArray(row[ props.childrenKey ]) === true
+                ) {
+                    localLazy = lazy.value[ key ]
+                }
+
+                const m = {
+                    key,
+                    level,
+                    parent,
+                    isParent,
+                    lazy: localLazy,
+                    // link: row.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
+                    children: [],
+                    // matchesFilter: props.filter ? computedFilterMethod.value(row, props.filter) : true,
+
+                    // 是否已展开
+                    expanded: isParent ? innerExpanded.value.includes(key) : false,
+                    // expandable,
+                }
+
+                meta[ key ] = m
+
+                // 如果为父级
+                if (isParent) {
+                    // m.childrens = row[ props.childrenKey ]
+                    m.children = row[ props.childrenKey ].map(n => travel(n, level + 1, m))
+                }
+
+                return m
+            }
+
+            props.rows.forEach(row => travel(row, 0, null))
+            return meta
+        })
+
+        /**
+         * 当前行数据
+         */
+        const currentRows = computed(function() {
+
+            // 如果有子数据
+            if (hasChildren.value) {
+                return getRows(props.rows, 0, 0)
+            }
+
+            // 否则返回原始行数据
+            return props.rows
+        })
+
         /**
          * 插槽标识
          */
         const slotNames = computed(function() {
-            return $n_isValidObject(slots) ? Object.keys(slots) : []
+
+            // 展开插槽标识
+            let expandName = hasChildren.value ? `body-cell-${props.columns[0].name}` : ''
+            // 是否存在展开插槽
+            let hasExpandSlot = expandName && $n_has(slots, expandName)
+            // 单元格插槽标识
+            const bodyCell = []
+            // 其他插槽标识
+            const other = []
+
+            $n_forIn(slots, function (value, key) {
+                if (key.startsWith('body-cell-')) {
+                    if (! hasExpandSlot || key !== expandName) {
+                        bodyCell.push(key)
+                    }
+                } else {
+                    other.push(key)
+                }
+            })
+
+            return {
+                // 展开插槽标识
+                expandName,
+                // 是否存在展开插槽
+                hasExpandSlot,
+                // 单元格插槽标识
+                bodyCell,
+                // 其他插槽标识
+                other,
+            }
+        })
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听已展开节点数据
+         */
+        watch(() => props.expanded, val => {
+            innerExpanded.value = val
+        })
+
+        /**
+         * 监听行数据
+         */
+        watch(()=>props.rows, () => {
+            if (props.defaultExpandAll) {
+                expandAll()
+            }
+        }, {
+            // 深度监听
+            deep: true,
+            // 立即执行
+            immediate: true,
         })
 
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 获取行数据
+         */
+        function getRows(rows, __level, __parentKey) {
+
+            const lists = []
+
+            for (const row of rows) {
+
+                lists.push(row)
+
+                const key = getRowKey.value(row)
+                const m = meta.value[ key ]
+
+                // 如果有子数据
+                if (
+                    m.isParent
+                    && $n_indexOf(innerExpanded.value, key) > -1
+                ) {
+                    const childRows = getRows(row[ props.childrenKey ])
+                    if (childRows.length) {
+                        lists.push(...childRows)
+                    }
+                }
+            }
+
+            return lists
+        }
+
+        /**
+         * 展开点击
+         */
+        function onExpandClick (props, e) {
+            if (e !== void 0) {
+                stopAndPrevent(e)
+            }
+
+            const m = meta.value[props.key]
+
+            // keyboard !== true && meta.selectable !== false && blur(meta.key)
+            setExpanded(props.key, ! m.expanded, props.row, m)
+        }
+
+        /**
+         * 在给定键的节点处展开树
+         */
+        function setExpanded (key, state, row, m) {
+
+            if (m.lazy && m.lazy !== 'loaded') {
+                if (m.lazy === 'loading') {
+                    return
+                }
+
+                lazy.value[ key ] = 'loading'
+                if (Array.isArray(row[ props.childrenKey ]) !== true) {
+                    row[ props.childrenKey ] = []
+                }
+                emit('lazyLoad', {
+                    row,
+                    key,
+                    done: children => {
+                        lazy.value[ key ] = 'loaded'
+                        row[ props.childrenKey ] = Array.isArray(children) === true ? children : []
+                        nextTick(() => {
+                            const localMeta = meta.value[ key ]
+                            if (localMeta && localMeta.isParent === true) {
+                                localSetExpanded(key, true)
+                            }
+                        })
+                    },
+                    fail: () => {
+                        delete lazy.value[ key ]
+                        if (row[ props.childrenKey ].length === 0) {
+                            delete row[ props.childrenKey ]
+                        }
+                    }
+                })
+
+            } else if (m.isParent === true) {
+                localSetExpanded(key, state)
+            }
+        }
+
+        function localSetExpanded (key, state) {
+            let target = innerExpanded.value
+            const shouldEmit = props.expanded !== void 0
+
+            if (shouldEmit === true) {
+                target = target.slice()
+            }
+
+            if (state) {
+                // if (props.accordion) {
+                //     if (meta.value[ key ]) {
+                //         const collapse = []
+                //         if (meta.value[ key ].parent) {
+                //             meta.value[ key ].parent.children.forEach(m => {
+                //                 if (m.key !== key && m.expandable === true) {
+                //                     collapse.push(m.key)
+                //                 }
+                //             })
+                //         }
+                //         else {
+                //             props.nodes.forEach(node => {
+                //                 const k = node[ props.nodeKey ]
+                //                 if (k !== key) {
+                //                     collapse.push(k)
+                //                 }
+                //             })
+                //         }
+                //         if (collapse.length > 0) {
+                //             target = target.filter(k => collapse.includes(k) === false)
+                //         }
+                //     }
+                // }
+
+                target = target.concat([ key ])
+                    .filter((key, index, self) => self.indexOf(key) === index)
+            }
+            else {
+                target = target.filter(k => k !== key)
+            }
+
+            if (shouldEmit === true) {
+                emit('update:expanded', target)
+            }
+            else {
+                innerExpanded.value = target
+            }
+        }
+
+        function getCellValue (col, row) {
+            const val = typeof col.field === 'function' ? col.field(row) : row[ col.field ]
+            return col.format !== void 0 ? col.format(val, row) : val
+        }
+
+        /**
+         * 用于折叠所有分支
+         */
+        function collapseAll () {
+            if (props.expanded !== void 0) {
+                emit('update:expanded', [])
+            }
+            else {
+                innerExpanded.value = []
+            }
+        }
+
+        /**
+         * 用于展开所有分支
+         */
+        function expandAll () {
+
+            if (! hasChildren.value) {
+                return
+            }
+
+            const expanded = innerExpanded.value
+
+            const travel = row => {
+                if (
+                    $n_has(row, props.childrenKey)
+                    && $n_isValidArray(row[props.childrenKey])
+                ) {
+                    expanded.push(row[ props.rowKey ])
+                    row[ props.childrenKey ].forEach(travel)
+                }
+            }
+
+            props.rows.forEach(travel)
+
+            if (props.expanded !== void 0) {
+                emit('update:expanded', expanded)
+
+            } else {
+                innerExpanded.value = expanded
+            }
+        }
+
         // ==========【返回】=============================================================================================
 
         return {
+            // 当前行数据
+            currentRows,
+            hasChildren,
             // 插槽标识
             slotNames,
+            computedIcon,
+            meta,
+
+            onExpandClick,
+            expandAll,
+            collapseAll,
+            getCellValue,
         }
     },
 }

package/components/table-column-fixed/index.vue

@@ -1,112 +1,110 @@
-<template>
-    <q-td :props="props">
-        <div class="q-gutter-sm" v-if="currentTableFixedPowerBtns.length">
-            <q-btn
-                v-for="item in currentTableFixedPowerBtns"
-                :key="`btn-item-${item.id}`"
-                class="n-button-icon"
-                :icon="item.icon"
-                dense
-                unelevated
-                round
-                @click.prevent.stop="onClick(item)"
-            >
-                <!-- 标题提示 -->
-                <q-tooltip>{{item.title}}</q-tooltip>
-            </q-btn>
-        </div>
-    </q-td>
-</template>
-
-<script>
-import { inject, computed } from 'vue'
-
-import $n_cloneDeep from 'lodash/cloneDeep'
-import $n_isFunction from 'lodash/isFunction'
-
-import $n_forEach from '@netang/utils/forEach'
-
-import { NPowerKey, NTableKey } from '../../utils/symbols'
-
-export default {
-
-    /**
-     * 标识
-     */
-    name: 'NTableColumnFixed',
-
-    /**
-     * 声明属性
-     */
-    props: {
-        // 传值
-        props: Object,
-    },
-
-    /**
-     * 组合式
-     */
-    setup(props) {
-
-        // ==========【数据】============================================================================================
-
-        // 获取权限注入
-        const {
-            // 权限按钮点击
-            powerBtnClick,
-            // 格式化权限按钮
-            formatPowerBtns,
-        } = inject(NPowerKey)
-
-        // 获取表格注入
-        const {
-            // 固定在右边的权限按钮列表
-            tableFixedPowerBtns,
-        } = inject(NTableKey)
-
-        // ==========【计算属性】=========================================================================================
-
-        /**
-         * 当前表格固定权限按钮
-         */
-        const currentTableFixedPowerBtns = computed(function () {
-
-            const lists = []
-
-            $n_forEach(tableFixedPowerBtns.value, function (item) {
-
-                item = $n_cloneDeep(item)
-
-                // 格式化权限按钮
-                if (formatPowerBtns(item, true, [ props.props.row ]) === false || item.hidden === true) {
-                    return
-                }
-
-                lists.push(item)
-            })
-
-            return lists
-        })
-
-        // ==========【方法】=============================================================================================
-
-        /**
-         * 点击
-         */
-        function onClick(item) {
-            powerBtnClick(item, [ props.props.row ])
-        }
-
-        // ==========【返回】=============================================================================================
-
-        return {
-            // 固定在右边的权限按钮列表
-            tableFixedPowerBtns,
-            // 当前表格固定权限按钮
-            currentTableFixedPowerBtns: $n_isFunction(formatPowerBtns) ? currentTableFixedPowerBtns : tableFixedPowerBtns,
-            // 权限按钮点击
-            onClick,
-        }
-    },
-}
-</script>
+<template>
+    <div class="q-gutter-sm" v-if="currentTableFixedPowerBtns.length">
+        <q-btn
+            v-for="item in currentTableFixedPowerBtns"
+            :key="`btn-item-${item.id}`"
+            class="n-button-icon"
+            :icon="item.icon"
+            dense
+            unelevated
+            round
+            @click.prevent.stop="onClick(item)"
+        >
+            <!-- 标题提示 -->
+            <q-tooltip>{{item.title}}</q-tooltip>
+        </q-btn>
+    </div>
+</template>
+
+<script>
+import { inject, computed } from 'vue'
+
+import $n_cloneDeep from 'lodash/cloneDeep'
+import $n_isFunction from 'lodash/isFunction'
+
+import $n_forEach from '@netang/utils/forEach'
+
+import { NPowerKey, NTableKey } from '../../utils/symbols'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NTableColumnFixed',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 传值
+        props: Object,
+    },
+
+    /**
+     * 组合式
+     */
+    setup(props) {
+
+        // ==========【数据】============================================================================================
+
+        // 获取权限注入
+        const {
+            // 权限按钮点击
+            powerBtnClick,
+            // 格式化权限按钮
+            formatPowerBtns,
+        } = inject(NPowerKey)
+
+        // 获取表格注入
+        const {
+            // 固定在右边的权限按钮列表
+            tableFixedPowerBtns,
+        } = inject(NTableKey)
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 当前表格固定权限按钮
+         */
+        const currentTableFixedPowerBtns = computed(function () {
+
+            const lists = []
+
+            $n_forEach(tableFixedPowerBtns.value, function (item) {
+
+                item = $n_cloneDeep(item)
+
+                // 格式化权限按钮
+                if (formatPowerBtns(item, true, [ props.props.row ]) === false || item.hidden === true) {
+                    return
+                }
+
+                lists.push(item)
+            })
+
+            return lists
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 点击
+         */
+        function onClick(item) {
+            powerBtnClick(item, [ props.props.row ])
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 固定在右边的权限按钮列表
+            tableFixedPowerBtns,
+            // 当前表格固定权限按钮
+            currentTableFixedPowerBtns: $n_isFunction(formatPowerBtns) ? currentTableFixedPowerBtns : tableFixedPowerBtns,
+            // 权限按钮点击
+            onClick,
+        }
+    },
+}
+</script>

package/components/tree/index.vue

@@ -84,7 +84,7 @@ import {
     nextTick, getCurrentInstance, onBeforeUpdate, onMounted, onUnmounted
 } from 'vue'
 
-import { stopAndPrevent } from 'quasar/src/utils/event.js'
+import { stopAndPrevent } from 'quasar/src/utils/event'
 
 const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
 
@@ -1003,9 +1003,7 @@ export default {
             }
         }
 
-        /**
-         * 默认展开全部
-         */
+        // 默认展开全部
         props.defaultExpandAll === true && expandAll()
 
         // expose public methods
@@ -1076,7 +1074,7 @@ export default {
                 const dragCss = $n_get(dragClasses.value, key)
 
                 // 当前节点类名
-                const classes = 'n-tree__node relative-position row no-wrap items-center  q-tree__node--link q-hoverable'
+                const classes = 'n-tree__node relative-position row no-wrap items-center q-tree__node--link q-hoverable'
                         // + (m.link === true ? ' q-tree__node--link q-hoverable q-focusable' : '')
                         + (m.selected === true || props.multiple && m.ticked === true ? ' n-tree__node--selected' : '')
                         + (m.disabled === true ? ' q-tree__node--disabled' : '')
@@ -1491,6 +1489,7 @@ export default {
 .n-tree {
     color: $grey;
 
+    // 空箭头
     &__arrow--noop {
         width: 16px;
         height: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/sass/quasar/table.scss

@@ -1,150 +1,161 @@
-/**
- * 表格
- */
-
-// 头部底部背景色
-$header-footer-bg-color: $grey-2;
-$dark-header-footer-bg-color: $color-gray-93;
-// 单元格背景色
-$td-bg-color: #ffffff;
-$dark-td-bg-color: $dark;
-
-.n-table {
-
-    // 单元格换行
-    &__col-wrap {
-        word-wrap: break-word !important;
-        white-space: pre-wrap !important;
-    }
-
-    &.q-table {
-        &--dense {
-            // 复选框
-            .q-table {
-                th,
-                td {
-                    &.q-table--col-auto-width:first-child {
-                        padding: 0 12px;
-                    }
-                }
-            }
-
-            thead tr,
-            tbody tr,
-            tbody td {
-                height: 40px;
-            }
-        }
-
-        &--horizontal-separator,
-        &--cell-separator {
-            tbody {
-                // 表格内容最后一排数据底部加上横线
-                &.q-virtual-scroll__content {
-                    tr:last-child > td {
-                        border-bottom-width: 1px;
-                    }
-                }
-            }
-        }
-    }
-
-    // 宫格模式
-    &--grid {
-        background-color: rgba(var(--n-reverse-color-rgb), 0.1);
-    }
-
-    // 撑满
-    &.absolute-full {
-        border-radius: unset;
-
-        // 顶部吸顶
-        thead tr th {
-            position: sticky;
-            z-index: 2;
-        }
-        thead tr:first-child th {
-            top: 0;
-        }
-
-        // 最后一列固定
-        &.n-table--last-fixed {
-            // 最后一列吸顶
-            th:last-child,
-            td:last-child {
-                position: sticky;
-                right: 0;
-                z-index: 1;
-            }
-            th:last-child {
-                z-index: 2;
-            }
-        }
-    }
-}
-
-// 亮色
-.body--light {
-    .n-table {
-
-        // 头部和底部背景色
-        .q-table__top,
-        .q-table__bottom,
-        thead tr:first-child th {
-            background-color: $header-footer-bg-color;
-        }
-
-        // 撑满
-        &.absolute-full {
-            // 最后一列固定
-            &.n-table--last-fixed {
-                // 头部最后一个
-                thead tr:last-child th:last-child {
-                    background-color: $header-footer-bg-color;
-                }
-                // 内容最后一个
-                td:last-child {
-                    background-color: $td-bg-color;
-                }
-                th:last-child,
-                td:last-child {
-                    background-color: $td-bg-color;
-                    border-left: 1px solid $table-border-color;
-                }
-            }
-        }
-    }
-}
-
-// 暗色
-.body--dark {
-    .n-table {
-
-        // 头部和底部背景色
-        .q-table__top,
-        .q-table__bottom,
-        thead tr:first-child th {
-            background-color: $dark-header-footer-bg-color;
-        }
-
-        // 撑满
-        &.absolute-full {
-            // 最后一列固定
-            &.n-table--last-fixed {
-                // 头部最后一个
-                thead tr:last-child th:last-child {
-                    background-color: $dark-header-footer-bg-color;
-                }
-                // 内容最后一个
-                td:last-child {
-                    background-color: $dark-td-bg-color;
-                }
-                th:last-child,
-                td:last-child {
-                    background-color: $dark-td-bg-color;
-                    border-left: 1px solid $table-dark-border-color;
-                }
-            }
-        }
-    }
-}
+/**
+ * 表格
+ */
+
+// 头部底部背景色
+$header-footer-bg-color: $grey-2;
+$dark-header-footer-bg-color: $color-gray-93;
+// 单元格背景色
+$td-bg-color: #ffffff;
+$dark-td-bg-color: $dark;
+
+.n-table {
+
+    // 单元格换行
+    &__col-wrap {
+        word-wrap: break-word !important;
+        white-space: pre-wrap !important;
+    }
+
+    // 箭头
+    //.q-tree__arrow {
+    //    color: $grey;
+    //}
+
+    // 空箭头
+    &__arrow-noop {
+        width: 16px;
+        margin-right: 4px;
+    }
+
+    &.q-table {
+        &--dense {
+            // 复选框
+            .q-table {
+                th,
+                td {
+                    &.q-table--col-auto-width:first-child {
+                        padding: 0 12px;
+                    }
+                }
+            }
+
+            thead tr,
+            tbody tr,
+            tbody td {
+                height: 40px;
+            }
+        }
+
+        &--horizontal-separator,
+        &--cell-separator {
+            tbody {
+                // 表格内容最后一排数据底部加上横线
+                &.q-virtual-scroll__content {
+                    tr:last-child > td {
+                        border-bottom-width: 1px;
+                    }
+                }
+            }
+        }
+    }
+
+    // 宫格模式
+    &--grid {
+        background-color: rgba(var(--n-reverse-color-rgb), 0.1);
+    }
+
+    // 撑满
+    &.absolute-full {
+        border-radius: unset;
+
+        // 顶部吸顶
+        thead tr th {
+            position: sticky;
+            z-index: 2;
+        }
+        thead tr:first-child th {
+            top: 0;
+        }
+
+        // 最后一列固定
+        &.n-table--last-fixed {
+            // 最后一列吸顶
+            th:last-child,
+            td:last-child {
+                position: sticky;
+                right: 0;
+                z-index: 1;
+            }
+            th:last-child {
+                z-index: 2;
+            }
+        }
+    }
+}
+
+// 亮色
+.body--light {
+    .n-table {
+
+        // 头部和底部背景色
+        .q-table__top,
+        .q-table__bottom,
+        thead tr:first-child th {
+            background-color: $header-footer-bg-color;
+        }
+
+        // 撑满
+        &.absolute-full {
+            // 最后一列固定
+            &.n-table--last-fixed {
+                // 头部最后一个
+                thead tr:last-child th:last-child {
+                    background-color: $header-footer-bg-color;
+                }
+                // 内容最后一个
+                td:last-child {
+                    background-color: $td-bg-color;
+                }
+                th:last-child,
+                td:last-child {
+                    background-color: $td-bg-color;
+                    border-left: 1px solid $table-border-color;
+                }
+            }
+        }
+    }
+}
+
+// 暗色
+.body--dark {
+    .n-table {
+
+        // 头部和底部背景色
+        .q-table__top,
+        .q-table__bottom,
+        thead tr:first-child th {
+            background-color: $dark-header-footer-bg-color;
+        }
+
+        // 撑满
+        &.absolute-full {
+            // 最后一列固定
+            &.n-table--last-fixed {
+                // 头部最后一个
+                thead tr:last-child th:last-child {
+                    background-color: $dark-header-footer-bg-color;
+                }
+                // 内容最后一个
+                td:last-child {
+                    background-color: $dark-td-bg-color;
+                }
+                th:last-child,
+                td:last-child {
+                    background-color: $dark-td-bg-color;
+                    border-left: 1px solid $table-dark-border-color;
+                }
+            }
+        }
+    }
+}