lxm_front/vxe-table
1
0
Fork 0
mirror of synced 2025-12-07 22:28:34 +08:00
Code Issues Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
xuliangzhan
2019-04-25 20:55:23 +08:00
parent aa04801947
commit f17ed4e8f3
16 changed files with 313 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@@ -14,8 +14,6 @@ A very powerful Vue table component.
* [column-index 索引列](#index-索引列)
* [column-radio 单选列](#radio-单选列)
* [column-checkbox 多选列](#checkbox-多选列)
* [column-sort 排序列](#sort-排序列)
* column-filter 筛选列
* column-expand 展开列
* column-tree 树形列
* column-edit 编辑列
@@ -88,6 +86,10 @@ A very powerful Vue table component.
| show-overflow-title | 当内容过长显示为省略号并用原生的 title 显示完整内容 | Boolean | — | false |
| show-overflow-tooltip | 当内容过长显示为省略号并用 tooltip 显示完整内容 | Boolean | — | false |
| formatter | 格式化显示内容 Function({cellValue, row, rowIndex, column, columnIndex}) | Function | — | — |
| sortBy | 自定义排序的属性 | String/Array | — | — |
| filters | 配置筛选条件数组 | Array | — | — |
| filterMultiple | 筛选是否允许多选 | Boolean | — | true |
| filterMethod | 自定义筛选方法 | Function | — | — |
### Cell Scoped Slot
@@ -188,37 +190,6 @@ A very powerful Vue table component.
|------|------|-----|
| change | 当选择项发生变化时会触发该事件 | selection, row |
## Sort 排序列
### Sort Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------|------|-----|------|-----|
| prop | 列属性 | String | — | — |
| label | 列标题 | String | — | — |
| width | 列宽度 | String | — | — |
| minWidth | 最小列宽度，把剩余宽度按比例分配 | String | — | — |
| fixed | 将列固定在左侧或者右侧 | String | — | left |
| align | 列对其方式 | String | — | left |
| header-align | 表头对齐方式 | String | — | — |
| ellipsis | 当内容过长时显示为省略号 | Boolean | — | false |
| show-overflow-title | 当内容过长显示为省略号并用原生的 title 显示完整内容 | Boolean | — | false |
| show-overflow-tooltip | 当内容过长显示为省略号并用 tooltip 显示完整内容 | Boolean | — | false |
| formatter | 格式化显示内容 Function({cellValue, row, rowIndex, column, columnIndex}) | Function | — | — |
| sortBy | 自定义排序的属性 | String/Array | — | — |
### Sort Events
| 事件名 | 说明 | 参数 |
|------|------|-----|
| change | 当排序条件发生变化时会触发该事件 | {column, order} |
### Sort Scoped Slot
| name | 说明 |
|------|------|
| — | 自定义显示内容，参数为 { row, rowIndex, column, columnIndex } |
## Example
```html

2
docs/index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vue table</title><link href=/vxe-table/static/css/index.eeac2746.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.b0608969.js rel=preload as=script><link href=/vxe-table/static/js/index.cb3bef5d.js rel=preload as=script><link href=/vxe-table/static/css/index.eeac2746.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.b0608969.js></script><script src=/vxe-table/static/js/index.cb3bef5d.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vue table</title><link href=/vxe-table/static/css/index.ae5834be.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.b0608969.js rel=preload as=script><link href=/vxe-table/static/js/index.254e12da.js rel=preload as=script><link href=/vxe-table/static/css/index.ae5834be.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.b0608969.js></script><script src=/vxe-table/static/js/index.254e12da.js></script></body></html>

1
docs/static/css/index.ae5834be.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/static/css/index.eeac2746.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/index.254e12da.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/static/js/index.cb3bef5d.js vendored
View File

File diff suppressed because one or more lines are too long

4
examples/views/Table1.vue
View File

@@ -46,8 +46,8 @@
<vxe-column-cell prop="name" label="名称"></vxe-column-cell>
<vxe-column-cell prop="age" label="年龄"></vxe-column-cell>
<vxe-column-cell prop="sex" label="性别"></vxe-column-cell>
<vxe-column-cell prop="rate" label="评分"></vxe-column-cell>
<vxe-column-sort prop="date" label="日期" @change="changeEvnet"></vxe-column-sort>
<vxe-column-cell prop="rate" label="评分" :filters="[]"></vxe-column-cell>
<vxe-column-cell prop="date" label="日期" sortable></vxe-column-cell>
<vxe-column-cell prop="address" label="地址">
<template v-slot="{ row }">
<span>{{ row.address }}</span>

208
lib/index.common.js
View File

@@ -4335,7 +4335,20 @@ function renderFixed(h, $table, fixedType) {
// 当内容过长显示为省略号并用 tooltip 显示完整内容
showOverflowTooltip: Boolean,
// 格式化显示内容
formatter: Function
formatter: Function,
// 是否允许排序
sortable: Boolean,
// 自定义排序的属性
sortBy: [String, Array],
// 配置筛选条件数组
filters: Array,
// 筛选是否允许多选
filterMultiple: {
type: Boolean,
default: true
},
// 自定义筛选方法
filterMethod: Function
},
inject: ['$table'],
data: function data() {
@@ -4345,7 +4358,17 @@ function renderFixed(h, $table, fixedType) {
};
},
created: function created() {
this.columnConfig = handle.getColumnConfig(this);
var options = {
renderHeader: this.renderHeader
};
if (this.filters && this.sortable) {} else if (this.sortable) {
options.renderHeader = this.renderSortHeader;
} else if (this.filters) {
options.renderHeader = this.renderFilterHeader;
}
this.columnConfig = handle.getColumnConfig(this, options);
},
mounted: function mounted() {
handle.assemColumn(this);
@@ -4355,7 +4378,7 @@ function renderFixed(h, $table, fixedType) {
},
methods: {
/**
* 渲染表头
* 渲染单元格表头
*/
renderHeader: function renderHeader(h, params) {
var $scopedSlots = this.$scopedSlots;
@@ -4367,6 +4390,55 @@ function renderFixed(h, $table, fixedType) {
return [h('span', params.column.label)];
},
/**
* 渲染排序表头
*/
renderSortHeader: function renderSortHeader(h, params) {
var _this = this;
var column = params.column;
return [h('span', column.label), h('span', {
class: ['vxe-sort-wrapper']
}, [h('i', {
class: ['vxe-sort--asc-icon', {
'sort--active': column.order === 'asc'
}],
on: {
click: function click(evnt) {
_this.changeSortEvent(evnt, column, params, 'asc');
}
}
}), h('i', {
class: ['vxe-sort--desc-icon', {
'sort--active': column.order === 'desc'
}],
on: {
click: function click(evnt) {
_this.changeSortEvent(evnt, column, params, 'desc');
}
}
})])];
},
/**
* 渲染筛选表头
*/
renderFilterHeader: function renderFilterHeader(h, params) {
var _this2 = this;
var column = params.column;
return [h('span', column.label), h('span', {
class: ['vxe-filter-wrapper']
}, [h('i', {
class: ['vxe-filter--icon'],
on: {
click: function click(evnt) {
_this2.changeEvent(evnt, column, params, 'asc');
}
}
})])];
},
/**
* 渲染单元格
*/
@@ -4396,6 +4468,11 @@ function renderFixed(h, $table, fixedType) {
}
return [h('span', cellValue)];
},
changeSortEvent: function changeSortEvent(evnt, column, params, order) {
if (column.order !== order) {
this.$table.rowSortEvent(evnt, params, order);
}
}
}
});
@@ -4754,128 +4831,6 @@ function renderFixed(h, $table, fixedType) {
}
}
});
// CONCATENATED MODULE: ./src/table/sort.js
/* harmony default export */ var sort = ({
name: 'VxeColumnSort',
props: {
// 列属性
prop: String,
// 列标题
label: String,
// 列宽度
width: [Number, String],
// 列最小宽度，把剩余宽度按比例分配
minWidth: [Number, String],
// 将列固定在左侧或者右侧
fixed: String,
// 列对其方式
align: String,
// 表头对齐方式
headerAlign: String,
// 当内容过长时显示为省略号
ellipsis: Boolean,
// 当内容过长显示为省略号并用原生的 title 显示完整内容
showOverflowTitle: Boolean,
// 当内容过长显示为省略号并用 tooltip 显示完整内容
showOverflowTooltip: Boolean,
// 格式化显示内容
formatter: Function,
// 自定义排序的属性
sortBy: [String, Array]
},
inject: ['$table'],
data: function data() {
return {
type: 'sort',
columnConfig: null
};
},
created: function created() {
this.columnConfig = handle.getColumnConfig(this);
},
mounted: function mounted() {
handle.assemColumn(this);
},
render: function render(h) {
return h('div');
},
methods: {
/**
* 渲染表头
*/
renderHeader: function renderHeader(h, params) {
var _this = this;
var column = params.column;
return [h('span', column.label), h('span', {
class: ['vxe-sort-wrapper']
}, [h('i', {
class: ['vxe-sort--asc', {
'sort--active': column.order === 'asc'
}],
on: {
click: function click(evnt) {
_this.changeEvent(evnt, column, params, 'asc');
}
}
}), h('i', {
class: ['vxe-sort--desc', {
'sort--active': column.order === 'desc'
}],
on: {
click: function click(evnt) {
_this.changeEvent(evnt, column, params, 'desc');
}
}
})])];
},
/**
* 渲染单元格
*/
renderCell: function renderCell(h, params) {
var cellValue;
var $scopedSlots = this.$scopedSlots,
formatter = this.formatter;
var row = params.row,
rowIndex = params.rowIndex,
column = params.column,
columnIndex = params.columnIndex;
if ($scopedSlots && $scopedSlots.default) {
return $scopedSlots.default(params);
}
cellValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.get(row, column.property);
if (formatter) {
cellValue = formatter({
cellValue: cellValue,
row: row,
rowIndex: rowIndex,
column: column,
columnIndex: columnIndex
});
}
return [h('span', cellValue)];
},
changeEvent: function changeEvent(evnt, column, params, order) {
var $table = this.$table;
if (column.order !== order) {
$table.rowSortEvent(evnt, params, order);
handle.emitEvent(this, 'change', [{
column: column,
order: order
}]);
}
}
}
});
// CONCATENATED MODULE: ./src/index.js
@@ -4884,7 +4839,6 @@ function renderFixed(h, $table, fixedType) {
/**
* 引入样式方式：
* 1.使用默认的主题样式：
@@ -4901,7 +4855,7 @@ if (true) {
__webpack_require__("26e2");
}
var components = [table, cell, group, src_table, table_radio, table_checkbox, sort];
var components = [table, cell, group, src_table, table_radio, table_checkbox];
var install = function install(Vue) {
if (!install.installed) {

2
lib/index.css
View File

File diff suppressed because one or more lines are too long

208
lib/index.umd.js
View File

@@ -4344,7 +4344,20 @@ function renderFixed(h, $table, fixedType) {
// 当内容过长显示为省略号并用 tooltip 显示完整内容
showOverflowTooltip: Boolean,
// 格式化显示内容
formatter: Function
formatter: Function,
// 是否允许排序
sortable: Boolean,
// 自定义排序的属性
sortBy: [String, Array],
// 配置筛选条件数组
filters: Array,
// 筛选是否允许多选
filterMultiple: {
type: Boolean,
default: true
},
// 自定义筛选方法
filterMethod: Function
},
inject: ['$table'],
data: function data() {
@@ -4354,7 +4367,17 @@ function renderFixed(h, $table, fixedType) {
};
},
created: function created() {
this.columnConfig = handle.getColumnConfig(this);
var options = {
renderHeader: this.renderHeader
};
if (this.filters && this.sortable) {} else if (this.sortable) {
options.renderHeader = this.renderSortHeader;
} else if (this.filters) {
options.renderHeader = this.renderFilterHeader;
}
this.columnConfig = handle.getColumnConfig(this, options);
},
mounted: function mounted() {
handle.assemColumn(this);
@@ -4364,7 +4387,7 @@ function renderFixed(h, $table, fixedType) {
},
methods: {
/**
* 渲染表头
* 渲染单元格表头
*/
renderHeader: function renderHeader(h, params) {
var $scopedSlots = this.$scopedSlots;
@@ -4376,6 +4399,55 @@ function renderFixed(h, $table, fixedType) {
return [h('span', params.column.label)];
},
/**
* 渲染排序表头
*/
renderSortHeader: function renderSortHeader(h, params) {
var _this = this;
var column = params.column;
return [h('span', column.label), h('span', {
class: ['vxe-sort-wrapper']
}, [h('i', {
class: ['vxe-sort--asc-icon', {
'sort--active': column.order === 'asc'
}],
on: {
click: function click(evnt) {
_this.changeSortEvent(evnt, column, params, 'asc');
}
}
}), h('i', {
class: ['vxe-sort--desc-icon', {
'sort--active': column.order === 'desc'
}],
on: {
click: function click(evnt) {
_this.changeSortEvent(evnt, column, params, 'desc');
}
}
})])];
},
/**
* 渲染筛选表头
*/
renderFilterHeader: function renderFilterHeader(h, params) {
var _this2 = this;
var column = params.column;
return [h('span', column.label), h('span', {
class: ['vxe-filter-wrapper']
}, [h('i', {
class: ['vxe-filter--icon'],
on: {
click: function click(evnt) {
_this2.changeEvent(evnt, column, params, 'asc');
}
}
})])];
},
/**
* 渲染单元格
*/
@@ -4405,6 +4477,11 @@ function renderFixed(h, $table, fixedType) {
}
return [h('span', cellValue)];
},
changeSortEvent: function changeSortEvent(evnt, column, params, order) {
if (column.order !== order) {
this.$table.rowSortEvent(evnt, params, order);
}
}
}
});
@@ -4763,128 +4840,6 @@ function renderFixed(h, $table, fixedType) {
}
}
});
// CONCATENATED MODULE: ./src/table/sort.js
/* harmony default export */ var sort = ({
name: 'VxeColumnSort',
props: {
// 列属性
prop: String,
// 列标题
label: String,
// 列宽度
width: [Number, String],
// 列最小宽度，把剩余宽度按比例分配
minWidth: [Number, String],
// 将列固定在左侧或者右侧
fixed: String,
// 列对其方式
align: String,
// 表头对齐方式
headerAlign: String,
// 当内容过长时显示为省略号
ellipsis: Boolean,
// 当内容过长显示为省略号并用原生的 title 显示完整内容
showOverflowTitle: Boolean,
// 当内容过长显示为省略号并用 tooltip 显示完整内容
showOverflowTooltip: Boolean,
// 格式化显示内容
formatter: Function,
// 自定义排序的属性
sortBy: [String, Array]
},
inject: ['$table'],
data: function data() {
return {
type: 'sort',
columnConfig: null
};
},
created: function created() {
this.columnConfig = handle.getColumnConfig(this);
},
mounted: function mounted() {
handle.assemColumn(this);
},
render: function render(h) {
return h('div');
},
methods: {
/**
* 渲染表头
*/
renderHeader: function renderHeader(h, params) {
var _this = this;
var column = params.column;
return [h('span', column.label), h('span', {
class: ['vxe-sort-wrapper']
}, [h('i', {
class: ['vxe-sort--asc', {
'sort--active': column.order === 'asc'
}],
on: {
click: function click(evnt) {
_this.changeEvent(evnt, column, params, 'asc');
}
}
}), h('i', {
class: ['vxe-sort--desc', {
'sort--active': column.order === 'desc'
}],
on: {
click: function click(evnt) {
_this.changeEvent(evnt, column, params, 'desc');
}
}
})])];
},
/**
* 渲染单元格
*/
renderCell: function renderCell(h, params) {
var cellValue;
var $scopedSlots = this.$scopedSlots,
formatter = this.formatter;
var row = params.row,
rowIndex = params.rowIndex,
column = params.column,
columnIndex = params.columnIndex;
if ($scopedSlots && $scopedSlots.default) {
return $scopedSlots.default(params);
}
cellValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default.a.get(row, column.property);
if (formatter) {
cellValue = formatter({
cellValue: cellValue,
row: row,
rowIndex: rowIndex,
column: column,
columnIndex: columnIndex
});
}
return [h('span', cellValue)];
},
changeEvent: function changeEvent(evnt, column, params, order) {
var $table = this.$table;
if (column.order !== order) {
$table.rowSortEvent(evnt, params, order);
handle.emitEvent(this, 'change', [{
column: column,
order: order
}]);
}
}
}
});
// CONCATENATED MODULE: ./src/index.js
@@ -4893,7 +4848,6 @@ function renderFixed(h, $table, fixedType) {
/**
* 引入样式方式：
* 1.使用默认的主题样式：
@@ -4910,7 +4864,7 @@ if (true) {
__webpack_require__("26e2");
}
var components = [table, cell, group, src_table, table_radio, table_checkbox, sort];
var components = [table, cell, group, src_table, table_radio, table_checkbox];
var install = function install(Vue) {
if (!install.installed) {

2
lib/index.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/index.js
View File

@@ -4,7 +4,6 @@ import ColumnGroup from './table/group'
import ColumnIndex from './table/index'
import ColumnRadio from './table/radio'
import ColumnCheckbox from './table/checkbox'
import ColumnSort from './table/sort'
/**
* 引入样式方式：
@@ -27,8 +26,7 @@ const components = [
ColumnGroup,
ColumnIndex,
ColumnRadio,
ColumnCheckbox,
ColumnSort
ColumnCheckbox
]
const install = function (Vue) {

85
src/table/cell.js
View File

@@ -25,7 +25,17 @@ export default {
// 当内容过长显示为省略号并用 tooltip 显示完整内容
showOverflowTooltip: Boolean,
// 格式化显示内容
formatter: Function
formatter: Function,
// 是否允许排序
sortable: Boolean,
// 自定义排序的属性
sortBy: [String, Array],
// 配置筛选条件数组
filters: Array,
// 筛选是否允许多选
filterMultiple: { type: Boolean, default: true },
// 自定义筛选方法
filterMethod: Function
},
inject: [
'$table'
@@ -37,7 +47,17 @@ export default {
}
},
created () {
this.columnConfig = HandleFunc.getColumnConfig(this)
let options = {
renderHeader: this.renderHeader
}
if (this.filters && this.sortable) {
} else if (this.sortable) {
options.renderHeader = this.renderSortHeader
} else if (this.filters) {
options.renderHeader = this.renderFilterHeader
}
this.columnConfig = HandleFunc.getColumnConfig(this, options)
},
mounted () {
HandleFunc.assemColumn(this)
@@ -47,7 +67,7 @@ export default {
},
methods: {
/**
* 渲染表头
* 渲染单元格表头
*/
renderHeader (h, params) {
let { $scopedSlots } = this
@@ -58,6 +78,60 @@ export default {
h('span', params.column.label)
]
},
/**
* 渲染排序表头
*/
renderSortHeader (h, params) {
let { column } = params
return [
h('span', column.label),
h('span', {
class: ['vxe-sort-wrapper']
}, [
h('i', {
class: ['vxe-sort--asc-icon', {
'sort--active': column.order === 'asc'
}],
on: {
click: evnt => {
this.changeSortEvent(evnt, column, params, 'asc')
}
}
}),
h('i', {
class: ['vxe-sort--desc-icon', {
'sort--active': column.order === 'desc'
}],
on: {
click: evnt => {
this.changeSortEvent(evnt, column, params, 'desc')
}
}
})
])
]
},
/**
* 渲染筛选表头
*/
renderFilterHeader (h, params) {
let { column } = params
return [
h('span', column.label),
h('span', {
class: ['vxe-filter-wrapper']
}, [
h('i', {
class: ['vxe-filter--icon'],
on: {
click: evnt => {
this.changeEvent(evnt, column, params, 'asc')
}
}
})
])
]
},
/**
* 渲染单元格
*/
@@ -75,6 +149,11 @@ export default {
return [
h('span', cellValue)
]
},
changeSortEvent (evnt, column, params, order) {
if (column.order !== order) {
this.$table.rowSortEvent(evnt, params, order)
}
}
}
}

110
src/table/sort.js
View File

@@ -1,110 +0,0 @@
import XEUtils from 'xe-utils'
import HandleFunc from '../tool/handle.js'
export default {
name: 'VxeColumnSort',
props: {
// 列属性
prop: String,
// 列标题
label: String,
// 列宽度
width: [Number, String],
// 列最小宽度，把剩余宽度按比例分配
minWidth: [Number, String],
// 将列固定在左侧或者右侧
fixed: String,
// 列对其方式
align: String,
// 表头对齐方式
headerAlign: String,
// 当内容过长时显示为省略号
ellipsis: Boolean,
// 当内容过长显示为省略号并用原生的 title 显示完整内容
showOverflowTitle: Boolean,
// 当内容过长显示为省略号并用 tooltip 显示完整内容
showOverflowTooltip: Boolean,
// 格式化显示内容
formatter: Function,
// 自定义排序的属性
sortBy: [String, Array]
},
inject: [
'$table'
],
data () {
return {
type: 'sort',
columnConfig: null
}
},
created () {
this.columnConfig = HandleFunc.getColumnConfig(this)
},
mounted () {
HandleFunc.assemColumn(this)
},
render (h) {
return h('div')
},
methods: {
/**
* 渲染表头
*/
renderHeader (h, params) {
let { column } = params
return [
h('span', column.label),
h('span', {
class: ['vxe-sort-wrapper']
}, [
h('i', {
class: ['vxe-sort--asc', {
'sort--active': column.order === 'asc'
}],
on: {
click: evnt => {
this.changeEvent(evnt, column, params, 'asc')
}
}
}),
h('i', {
class: ['vxe-sort--desc', {
'sort--active': column.order === 'desc'
}],
on: {
click: evnt => {
this.changeEvent(evnt, column, params, 'desc')
}
}
})
])
]
},
/**
* 渲染单元格
*/
renderCell (h, params) {
let cellValue
let { $scopedSlots, formatter } = this
let { row, rowIndex, column, columnIndex } = params
if ($scopedSlots && $scopedSlots.default) {
return $scopedSlots.default(params)
}
cellValue = XEUtils.get(row, column.property)
if (formatter) {
cellValue = formatter({ cellValue, row, rowIndex, column, columnIndex })
}
return [
h('span', cellValue)
]
},
changeEvent (evnt, column, params, order) {
let { $table } = this
if (column.order !== order) {
$table.rowSortEvent(evnt, params, order)
HandleFunc.emitEvent(this, 'change', [{ column, order }])
}
}
}
}

63
style/table.scss
View File

@@ -19,9 +19,17 @@
box-sizing: border-box
}
&.t--animat {
.vxe-checkbox,
.vxe-radio {
> input {
&:checked+span {
transition: background-color .2s ease-in-out;
}
}
}
.vxe-sort-wrapper {
.vxe-sort--asc,
.vxe-sort--desc {
.vxe-sort--asc-icon,
.vxe-sort--desc-icon {
&:before {
transition: border .2s ease-in-out;
}
@@ -177,11 +185,14 @@
right: 0;
overflow-y: auto;
}
/*排序*/
.vxe-sort-wrapper {
padding: 0 2px;
vertical-align: middle;
display: inline-block;
.vxe-sort--asc,
.vxe-sort--desc {
.vxe-sort--asc-icon,
.vxe-sort--desc-icon {
position: relative;
display: block;
width: 18px;
@@ -194,14 +205,14 @@
border: 5px solid transparent;
}
}
.vxe-sort--asc {
.vxe-sort--asc-icon {
&:before {
top: 0;
border-bottom-color: $vxe-table-column-sort-border-color;
border-bottom-color: $vxe-table-column-icon-border-color;
}
&:hover {
&:before {
border-bottom-color: $vxe-table-column-sort-border-hover-color;
border-bottom-color: $vxe-table-column-icon-border-hover-color;
}
}
&.sort--active {
@@ -210,14 +221,14 @@
}
}
}
.vxe-sort--desc {
.vxe-sort--desc-icon {
&:before {
bottom: 2px;
border-top-color: $vxe-table-column-sort-border-color;
border-top-color: $vxe-table-column-icon-border-color;
}
&:hover {
&:before {
border-top-color: $vxe-table-column-sort-border-hover-color;
border-top-color: $vxe-table-column-icon-border-hover-color;
}
}
&.sort--active {
@@ -227,6 +238,38 @@
}
}
}
/*筛选*/
.vxe-filter-wrapper {
padding: 0 2px;
vertical-align: middle;
display: inline-block;
.vxe-filter--icon {
position: relative;
display: block;
width: 18px;
height: 18px;
cursor: pointer;
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
top: 3px;
left: 3px;
border: 6px solid transparent;
border-top-color: $vxe-table-column-icon-border-color;
}
&:after {
left: 8px;
top: 6px;
width: 2px;
height: 8px;
background-color: $vxe-table-column-icon-border-color;
}
}
}
}
.vxe-checkbox,

6
style/variable.scss
View File

@@ -9,8 +9,10 @@ $vxe-input-border-color: #dcdfe6;
$vxe-table-header-background-color: #f8f8f9;
$vxe-table-border-color: #e8eaec;
$vxe-table-background-color: #ffffff;
$vxe-table-striped-background-color: #fafafa;
$vxe-table-row-hover-background-color: #f5f7fa;
$vxe-table-row-selected-background-color: #ecf5ff;
$vxe-table-column-sort-border-color: #c0c4cc;
$vxe-table-column-sort-border-hover-color: #515A6E;
$vxe-table-column-icon-border-color: #c0c4cc;
$vxe-table-column-icon-border-hover-color: #515A6E;