vxe-table 边框样式

1、安装vxe

项目用的vue2，需要安装3.6.6版。

yarn add xe-utils vxe-table@legacy

全局引入，也可局部引入。

import Vue from 'vue'
      import VXETable from 'vxe-table'
      import 'vxe-table/lib/style.css'

      Vue.use(VXETable)

2、实现可编辑表

需要 border=none 去除边框，否则外边框颜色无法修改（可能是我没找到方法）

<div class="table">
            <vxe-table border=none style="border:1px solid rgba(167, 180, 183, 0.3)" ref="xTable" height="300"
                keep-source show-overflow :export-config="{}" :header-cell-style="headerCellStyle"
                :cell-style="cellStyle" :loading="loading"
                :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
                <vxe-column type="seq" title=" " width="50" fixed="left"></vxe-column>
                <vxe-column v-for="(item, index) in columns" :key="item.title" :field="item.title" :title="item.title"
                    width="80" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                        <vxe-input v-model="row[index + 1]" type="text"></vxe-input>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>

export default {
    data() {
        return {
            loading: false,
            columns: []
        }
    },
    created() {
        this.findList()
    },
    methods: {
        findList() {
            this.loading = true
            return new Promise(resolve => {
                setTimeout(() => {
                    const data = this.mockList(900)
                    // 阻断 vue 对大数组的监听，避免 vue 绑定大数据造成短暂的卡顿
                    if (this.$refs.xTable) {
                        this.$refs.xTable.loadData(data)
                    }
                    resolve()
                    this.loading = false
                }, 300)
            })
        },
        mockList(size) {
            const list = []
            for (let index = 0; index < size; index++) {
                list.push({ })
                this.columns.push({
                    title: `${index + 1}`
                })
            }
            return list
        },
        mockListHeader(val) {
            for (let i = 0; i < val; i++) {
                this.columns.push({
                    title: `${i + 1}`
                })
            }
        },
        headerCellStyle({ column, columnIndex }) {
            if (column.level === 1) {
                return {
                    backgroundColor: 'linear-gradient(0deg, rgba(17, 27, 43, 0.8) -131.68%, rgba(41, 48, 66, 0.8) 162.48%)',
                    color: '#B3C0C9',
                }
            }
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
            let rowStyle = {}
            if (columnIndex == 0) {
                rowStyle.background = 'linear-gradient(0deg, rgba(17, 27, 43, 0.8) -131.69%, rgba(41, 48, 66, 0.8) 162.47%)'
                rowStyle.color = '#B3C0C9'
            } else {
                rowStyle.background = 'rgba(17, 27, 43, 0)'
            }
            return rowStyle
        }

    }
}

表格样式修改

<style lang="scss" scoped>
/** 滚动条样式 */
::v-deep {

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    .vxe-table--body-wrapper::-webkit-scrollbar {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        opacity: 0.5;
        background-color: linear-gradient(180deg, rgba(17, 27, 43, 0.8) -1%, rgba(41, 48, 66, 0.8) 119%);
        border: 1px solid rgba(167, 180, 183, 0.3);
        // border-left: none;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    /* ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #000D16;
        border-left: 1px solid #4A7EF2;
        border-right: 1px solid #4A7EF2;
    } */

    /*定义滑块 内阴影+圆角*/
    .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
        // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        border-radius: 0px;
        -moz-border-radius: 0px;
        background: rgba(44, 137, 229, 0.6);
    }

    /* 这是总的上下左右四个箭头，需要宽度设置0，高度设置0，不然有默认按钮高度 */
    .vxe-table--body-wrapper::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
        /* display: block; */
    }

    /* 上面箭头 */
    .vxe-table--body-wrapper::-webkit-scrollbar-button:vertical:single-button:start {
        width: 16px;
        height: 16px;
        background: url("~@/assets/imgs/scheme/land/scrooll-arrow-top.png") 2px 5px no-repeat;
        background-size: 9px 7px;
        cursor: pointer;
        background-color: linear-gradient(180deg, rgba(17, 27, 43, 0.8) -22.94%, rgba(29, 38, 55, 0.8) -1.21%, rgba(38, 46, 63, 0.8) 32.75%, rgba(41, 48, 66, 0.8) 107.44%);
        border-top: 1px solid rgba(167, 180, 183, 0.3);
    }

    /* 下面箭头 */
    .vxe-table--body-wrapper::-webkit-scrollbar-button:vertical:single-button:end {
        /* border: 1px solid red; */
        width: 16px;
        height: 16px;
        background: url("~@/assets/imgs/scheme/land/scrooll-arrow-bot.png") 2px no-repeat;
        background-size: 9px 7px;
        cursor: pointer;
        background-color: linear-gradient(180deg, rgba(17, 27, 43, 0.8) -22.94%, rgba(29, 38, 55, 0.8) -1.21%, rgba(38, 46, 63, 0.8) 32.75%, rgba(41, 48, 66, 0.8) 107.44%);
    }

    /* 最低下面左边 */
    .vxe-table--body-wrapper::-webkit-scrollbar-button:horizontal:single-button:start {
        /* border: 1px solid red; */
        width: 16px;
        height: 16px;
        background: url("~@/assets/imgs/scheme/land/scrooll-arrow-left.png") 4px no-repeat;
        background-size: 7px 9px;
        cursor: pointer;
        background-color: linear-gradient(0deg, rgba(17, 27, 43, 0.8) -22.88%, rgba(29, 38, 55, 0.8) -1.16%, rgba(38, 46, 63, 0.8) 32.78%, rgba(41, 48, 66, 0.8) 107.44%);
    }

    /* 最低下面右边 */
    .vxe-table--body-wrapper::-webkit-scrollbar-button:horizontal:single-button:end {
        /* border: 1px solid red; */
        width: 16px;
        height: 16px;
        background: url("~@/assets/imgs/scheme/land/scrooll-arrow-right.png") 4px no-repeat;
        background-size: 7px 9px;
        cursor: pointer;
        background-color: linear-gradient(0deg, rgba(17, 27, 43, 0.8) -22.88%, rgba(29, 38, 55, 0.8) -1.16%, rgba(38, 46, 63, 0.8) 32.78%, rgba(41, 48, 66, 0.8) 107.44%);
    }

    /* 这个是后加的!!!下面效果图没有更换,右下角背景颜色 */
    .vxe-table--body-wrapper::-webkit-scrollbar-corner {
        border-right: 1px solid rgba(167, 180, 183, 0.3);
        border-bottom: 1px solid rgba(167, 180, 183, 0.3);
        background-color: linear-gradient(0deg, rgba(17, 27, 43, 0.8) -22.88%, rgba(29, 38, 55, 0.8) -1.16%, rgba(38, 46, 63, 0.8) 32.78%, rgba(41, 48, 66, 0.8) 107.44%);
    }
}

::v-deep {
    .vxe-body--column {
        border-left: 1px solid rgba(167, 180, 183, 0.3) !important;
        border-right: 1px solid rgba(167, 180, 183, 0.3) !important;
        border-bottom: 1px solid rgba(167, 180, 183, 0.3) !important;
    }

    th.vxe-header--column {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        text-align: center;
        border-left: 1px solid rgba(167, 180, 183, 0.3) !important;
        border-bottom: 1px solid rgba(167, 180, 183, 0.3) !important;
        border-top: none;
        border-right: 1px solid rgba(167, 180, 183, 0.3) !important;
    }

    .vxe-header--column.col--ellipsis>.vxe-cell .vxe-cell--title {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*修改表头背景色*/
    .vxe-table--header-wrapper,
    .vxe-header--row,
    .vxe-table--header {
        border: none;
        background: linear-gradient(0deg, rgba(17, 27, 43, 0.8) -412.33%, rgba(41, 48, 66, 0.8) 245.1%);
    }

    /*调整表格行高*/
    .vxe-table .vxe-body--column:not(.col--ellipsis),
    .vxe-table .vxe-footer--column:not(.col--ellipsis),
    .vxe-table .vxe-header--column:not(.col--ellipsis) {
        padding: 5px 0;
    }

    /*调整表格 单元格背景颜色*/
    .vxe-table .vxe-table--body-wrapper,
    .vxe-table .vxe-table--footer-wrapper {
        border: none;
        background-color: rgba(27, 40, 56, 0);
    }

    /*调整表格文字及位置*/
    .vxe-table .vxe-body--column,
    .vxe-table .vxe-footer--column,
    .vxe-table .vxe-header--column {
        position: relative;
        line-height: 24px;
        text-align: center;
        color: #ffffff;
    }

    /*调整表头首行  line 的颜色*/
    .vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 0;
        border: none;
    }

    .vxe-body--row.row--hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    /** 单元格高度 */
    .vxe-table--render-default .vxe-body--column.col--ellipsis,
    .vxe-table--render-default.vxe-editable .vxe-body--column,
    .vxe-table--render-default .vxe-footer--column.col--ellipsis,
    .vxe-table--render-default .vxe-header--column.col--ellipsis {
        height: 31px;
    }

    .vxe-input--inner {
        width: 100%;
        height: 80%;
        border-radius: 0.04rem;
        outline: 0;
        margin: 0;
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
        padding: 0 0em;
        color: #2C89E5;
        border: 0.01rem solid #2C89E5;
        background-color: rgba(255, 255, 255, 0);
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    /** 编辑图标 */
    .vxe-header--column .vxe-cell--edit-icon,
    .vxe-header--column .vxe-cell-help-icon {
        display: none;
        margin-right: 0.2em;
    }

    .vxe-table--render-default .vxe-body--column.col--dirty:before {
        content: "";
        top: -0.05rem;
        left: -0.05rem;
        position: absolute;
        border-width: 0.05rem;
        border-style: solid;
        border-color: transparent rgba(245, 108, 108, 0) transparent transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    /** 编辑框样式 */
    .vxe-input {
        font-size: 0.14rem;
        height: 0.31rem;
        line-height: 0.34rem;
    }

    /** 加载 */
    .vxe-loading {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 99;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: rgba(167, 180, 183, 0.1);
    }
}
</style>

3、最终效果