mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(advance-table): finished advance-table header components

Browse Source
This commit is contained in:
JiwenBai 2019-10-23 14:10:05 +08:00
parent 53cbc7ac24
commit cd2f2177ad
4 changed files with 141 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
demo/documentation/components/advancedTable/enUS/seniorUsage.md
View File

@ -1,4 +1,5 @@
# Senior Usage # Senior Usage
```html ```html
<n-advance-table <n-advance-table
ref="table" ref="table"
@ -11,10 +12,7 @@
@on-change="onChange" @on-change="onChange"
> >
<div slot="table-operation-batch-left"> <div slot="table-operation-batch-left">
<n-button <n-button size="small" @click="clear">
size="small"
@click="clear"
>
clear all filters clear all filters
</n-button> </n-button>
</div> </div>
@ -22,6 +20,7 @@
<h1>Network params</h1> <h1>Network params</h1>
<pre>{{ query }}</pre> <pre>{{ query }}</pre>
``` ```
```js ```js
const items = [ const items = [
{ {
@ -55,7 +54,7 @@ const sex = [
value: 'female' value: 'female'
} }
] ]
const _columns3 = ($this) => { const _columns3 = $this => {
return [ return [
{ {
title: 'Name', title: 'Name',
@ -69,11 +68,11 @@ const _columns3 = ($this) => {
title: 'Age', title: 'Age',
key: 'age', key: 'age',
sortable: true, sortable: true,
sorter (a, b) { sorter(a, b) {
return a.age - b.age return a.age - b.age
}, },
// filterMultiple: true, // filterMultiple: true,
asyncFilterItems () { asyncFilterItems() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
// 模拟概率发生错误 // 模拟概率发生错误
@ -95,7 +94,7 @@ const _columns3 = ($this) => {
return values.includes(record.sex) return values.includes(record.sex)
}, },
filterMultiple: true, filterMultiple: true,
asyncFilterItems () { asyncFilterItems() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
Math.random() > 0.6 Math.random() > 0.6
@ -123,7 +122,7 @@ const _columns3 = ($this) => {
} }
export default { export default {
components: {}, components: {},
data () { data() {
const columns = _columns3(this) const columns = _columns3(this)
return { return {
loading: false, loading: false,
@ -140,15 +139,15 @@ export default {
} }
} }
}, },
mounted () { mounted() {
this.$refs.table.setParams({ this.$refs.table.setParams({
filter: { age: [15] }, filter: { age: [15] },
sorter: { key: 'age', type: -1 }, sorter: { key: 'name', type: -1 },
searcher: { key: 'name', value: 'xiaobai' } searcher: { key: 'name', value: 'xiaobai' }
}) })
}, },
methods: { methods: {
getData (args) { getData(args) {
this.loading = true this.loading = true
setTimeout(() => { setTimeout(() => {
let d = new Array(20).fill(0) let d = new Array(20).fill(0)
@ -163,7 +162,8 @@ export default {
this.loading = false this.loading = false
}, 3000) }, 3000)
}, },
onChange (args) { onChange(args) {
console.log('reomte change')
this.query = args this.query = args
/** /**
* "filter": { * "filter": {
@ -199,11 +199,11 @@ export default {
*/ */
this.getData(args) this.getData(args)
}, },
clear () { clear() {
// 清除所有的Filter选项,会触发onchange事件 // 清除所有的Filter选项,会触发onchange事件
this.$refs.table.setParams({}) this.$refs.table.setParams({})
this.$NMessage.info('clear all filters', { duration: 5000 }) this.$NMessage.info('clear all filters', { duration: 5000 })
} }
} }
} }
``` ```

61
packages/common/AdvanceTable/header/header.vue
View File

@ -10,9 +10,9 @@
v-for="(column, i) in columns" v-for="(column, i) in columns"
:key="i" :key="i"
:style="computeCustomWidthStl(column)" :style="computeCustomWidthStl(column)"
> />
<col v-if="scrollBarWidth" :width="scrollBarWidth" > <col v-if="scrollBarWidth" :width="scrollBarWidth" />
</colgroup> </colgroup>
<n-thead> <n-thead>
<n-tr> <n-tr>
@ -51,11 +51,10 @@
:ref="'sorter_' + (column.key || i)" :ref="'sorter_' + (column.key || i)"
:value="sortIndexs[column.key || i]" :value="sortIndexs[column.key || i]"
class="n-advance-table__header-icon" class="n-advance-table__header-icon"
@input="sortInput"
:current-key="currentKey"
:column="column" :column="column"
:index="i" :index="i"
@onSortTypeChange="onSortTypeChange" :current-key="currentKey"
@input="sortInput"
/> />
<!-- 优先自定义 --> <!-- 优先自定义 -->
@ -98,12 +97,30 @@ export default {
PopFilter PopFilter
}, },
props: { props: {
colGroupStl: {}, colGroupStl: {
columns: {}, type: Object,
scrollBarWidth: {}, default: () => ({})
sortIndexs: {}, },
selectedFilter: {}, columns: {
showingData: {} type: Array,
default: () => []
},
scrollBarWidth: {
type: [Number, String],
default: 0
},
sortIndexs: {
type: Object,
default: () => ({})
},
selectedFilter: {
type: Object,
default: () => ({})
},
showingData: {
type: Array,
default: () => []
}
}, },
data () { data () {
return { return {
@ -118,12 +135,13 @@ export default {
) )
}, },
currentKey () { currentKey () {
let currentKey = null let currentKey = ''
Object.keys(this.sortIndexs).forEach(key => { Object.keys(this.sortIndexs).forEach(key => {
if (this.sortIndexs[key] !== null) { if (this.sortIndexs[key] !== null) {
currentKey = key currentKey = key
} }
}) })
// console.log('TCL: currentKey -> currentKey', currentKey)
return currentKey return currentKey
} }
}, },
@ -138,8 +156,11 @@ export default {
} }
} }
}, },
sortInput (value, column) { sortInput (value, column, sorter) {
this.$set(this.sortIndexs, column.key, value) const sortIndexs = {}
sortIndexs[column.key] = value
// console.log('TCL: sortInput -> value', sortIndexs)
this.$emit('on-sort-change', sortIndexs)
}, },
sortByColumn (column) { sortByColumn (column) {
if (!column.sortable || column.key === void 0) return if (!column.sortable || column.key === void 0) return
@ -165,20 +186,16 @@ export default {
} }
return null return null
}, },
clearSort () { clearOtherSort (notClearKey) {
const sortIndexs = {}
Object.keys(this.sortIndexs).forEach(key => { Object.keys(this.sortIndexs).forEach(key => {
this.sortIndexs[key] = null if (key !== notClearKey) sortIndexs[key] = null
}) })
return sortIndexs
}, },
onAllCheckboxesClick () { onAllCheckboxesClick () {
this.$emit('on-checkbox-all', this.currentPageAllSelect) this.$emit('on-checkbox-all', this.currentPageAllSelect)
}, },
onSortTypeChange (sorter) {
this.clearSort()
this.sortInput(sorter.type, sorter.column)
console.log('TCL: onSortTypeChange -> sorter', sorter)
this.$emit('on-sort-change', sorter)
},
onFilter (value, column) { onFilter (value, column) {
this.$emit('on-filter', value, column) this.$emit('on-filter', value, column)
} }

70
packages/common/AdvanceTable/sortIcon/index.vue
View File

@ -23,26 +23,22 @@
<script> <script>
// refer to https://github.com/TuSimple/infra-ecos-webui/blob/develop/src/components/SortIcon.vue // refer to https://github.com/TuSimple/infra-ecos-webui/blob/develop/src/components/SortIcon.vue
const computeOpacity = val => { const computeOpacity = val => {
let self = {} let upOpacity = 0.4
let downOpacity = 0.4
switch (val) { switch (val) {
case 0:
self.upOpacity = 0.4
self.downOpacity = 0.4
break
case 1: case 1:
self.upOpacity = 1 upOpacity = 1
self.downOpacity = 0.4 downOpacity = 0.4
break break
case -1: case -1:
self.upOpacity = 0.4 upOpacity = 0.4
self.downOpacity = 1 downOpacity = 1
break
case null:
self.upOpacity = 0.4
self.downOpacity = 0.4
break break
} }
return self return {
downOpacity,
upOpacity
}
} }
export default { export default {
name: 'SortIcon', name: 'SortIcon',
@ -63,7 +59,10 @@ export default {
type: Object, type: Object,
required: true required: true
}, },
currentKey: {} currentKey: {
type: [String, Number],
required: true
}
}, },
data () { data () {
return { return {
@ -73,27 +72,31 @@ export default {
}, },
computed: { computed: {
opacitys () { opacitys () {
const normalOpacity = 0.4
if (this.currentKey !== this.column.key) { if (this.currentKey !== this.column.key) {
this.upOpacity = 0.4 return {
this.downOpacity = 0.4 upOpacity: normalOpacity,
return 0.4 downOpacity: normalOpacity
}
} }
let val = this.value let val = this.value
return computeOpacity(val) return computeOpacity(val)
} }
}, },
watch: { watch: {
value (val) { // value (val, pldVal) {
if (val !== null) { // if (val !== null) {
this.$emit('onSortTypeChange', { // console.log('from watch', val, pldVal)
i: this.index, // const sorter = {
sortable: this.column.sortable, // i: this.index,
key: this.column.key || this.index, // sortable: this.column.sortable,
type: val, // key: this.column.key || this.index,
column: this.column // type: val,
}) // column: this.column
} // }
} // this.$emit('on-sort-change', val, this.column, sorter)
// }
// }
}, },
mounted () { mounted () {
if (this.value !== 0 && this.value !== null) { if (this.value !== 0 && this.value !== null) {
@ -130,7 +133,14 @@ export default {
} }
}, },
setSort (val) { setSort (val) {
this.$emit('input', val) const sorter = {
i: this.index,
sortable: this.column.sortable,
key: this.column.key || this.index,
type: val,
column: this.column
}
this.$emit('input', val, this.column, sorter)
} }
} }
} }

76
packages/common/AdvanceTable/src/main.vue
View File

@ -39,7 +39,7 @@
:selected-filter="selectedFilter" :selected-filter="selectedFilter"
:showing-data="showingData" :showing-data="showingData"
@on-checkbox-all="onAllCheckboxesClick" @on-checkbox-all="onAllCheckboxesClick"
@on-sort-change="onSortTypeChange" @on-sort-change="onSortChange"
@on-filter="onFilter" @on-filter="onFilter"
/> />
<!-- table body --> <!-- table body -->
@ -137,8 +137,8 @@
<script> <script>
import row from '../row/index.js' import row from '../row/index.js'
import SortIcon from '../sortIcon' // import SortIcon from '../sortIcon'
import PopFilter from '../popFilter' // import PopFilter from '../popFilter'
import searchInput from '../searchInput' import searchInput from '../searchInput'
import { noopFn } from '../../../utils/index' import { noopFn } from '../../../utils/index'
import withapp from '../../../mixins/withapp' import withapp from '../../../mixins/withapp'
@ -149,8 +149,8 @@ export default {
name: 'NAdvanceTable', name: 'NAdvanceTable',
components: { components: {
row, row,
SortIcon, // SortIcon,
PopFilter, // PopFilter,
searchInput, searchInput,
TableHeader TableHeader
}, },
@ -234,7 +234,6 @@ export default {
tbodyWidth: 'auto;', tbodyWidth: 'auto;',
scrollBarWidth: '0', scrollBarWidth: '0',
searchData: [], searchData: [],
currentSortColumn: null,
currentFilterColumn: null, currentFilterColumn: null,
currentSearchColumn: null, currentSearchColumn: null,
currentPage: 1, currentPage: 1,
@ -245,6 +244,33 @@ export default {
} }
}, },
computed: { computed: {
currentSortColumn () {
let sorterKey = null
let i = 0
console.log(this.sortIndexs)
Object.keys(this.sortIndexs).forEach(key => {
if (this.sortIndexs[key] !== null) {
sorterKey = key
}
})
if (!sorterKey) {
return null
}
let sorterColumn = this.columns.find((column, idx) => {
i = idx
return column.key === sorterKey
})
if (!sorterColumn) {
return null
}
return {
sortable: sorterColumn.sortable,
key: sorterKey,
type: this.sortIndexs[sorterKey],
column: sorterColumn,
i
}
},
paginationer () { paginationer () {
if (this.pagination) { if (this.pagination) {
return { return {
@ -369,9 +395,6 @@ export default {
this.useRemoteChange() this.useRemoteChange()
} }
this.currentPageAllSelect = this.allCheckboxesSelect this.currentPageAllSelect = this.allCheckboxesSelect
console.log('currentPage')
this.$emit('on-page-change', this.paginationer) this.$emit('on-page-change', this.paginationer)
}, },
data () { data () {
@ -385,9 +408,16 @@ export default {
currentSearchColumn () { currentSearchColumn () {
this.searchData = this.computeShowingData() this.searchData = this.computeShowingData()
}, },
currentSortColumn () { currentSortColumn (sorter, oldSorter) {
this.searchData = this.computeShowingData() this.searchData = this.computeShowingData()
console.log('currentSortColumn') // 上次的若是为custom,本次为locale sort那么也需要触发useRemoteChange
if (
sorter.sortable === 'custom' ||
(oldSorter && oldSorter.sortable === 'custom')
) {
this.useRemoteChange()
}
this.$emit('on-sort-change', this.currentSortColumn)
}, },
checkBoxes () { checkBoxes () {
this.$emit('on-selected-change', this.selectedRows) this.$emit('on-selected-change', this.selectedRows)
@ -517,7 +547,9 @@ export default {
*/ */
setParams ({ filter, sorter, page, searcher }) { setParams ({ filter, sorter, page, searcher }) {
if (sorter) { if (sorter) {
this.sortIndexs[sorter.key] = sorter.type // console.log('this.sortIndexs', this.sortIndexs)
this.$set(this.sortIndexs, sorter.key, sorter.type)
// this.sortIndexs[sorter.key] = sorter.type
// const ref = this.$refs['sorter_' + sorter.key][0] // const ref = this.$refs['sorter_' + sorter.key][0]
// ref.setSort(sorter.type) // ref.setSort(sorter.type)
// this.sortIndexs[sorter.key] = sorter.type // this.sortIndexs[sorter.key] = sorter.type
@ -767,23 +799,9 @@ export default {
} }
this.$emit('on-filter-change', this.currentFilterColumn) this.$emit('on-filter-change', this.currentFilterColumn)
}, },
onSortTypeChange ({ i, sortable, key, type, column }) { onSortChange (sortIndexs) {
console.log( console.log('TCL: onSortTypeChange -> sortIndexs', sortIndexs)
'TCL: onSortTypeChange -> onSortTypeChange', this.sortIndexs = sortIndexs
'onSortTypeChange'
)
this.$set(this.sortIndexs, key, type)
this.currentSortColumn = {
sortable,
key,
type,
column,
i
}
if (sortable === 'custom') {
this.useRemoteChange()
}
this.$emit('on-sort-change', this.currentSortColumn)
} }
} }
} }