mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(table): best practices finished

Browse Source
This commit is contained in:
JiwenBai 2019-12-16 11:00:51 +08:00
parent df1fd15a98
commit ea5cdc056a
3 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/documentation/components/table/enUS/bestPractices.md
View File

@ -180,11 +180,12 @@ export default {
const sorter = query.sorter ? JSON.parse(query.sorter) : null; const sorter = query.sorter ? JSON.parse(query.sorter) : null;
const filter = query.filter ? JSON.parse(query.filter) : null; const filter = query.filter ? JSON.parse(query.filter) : null;
this.fetchData(page, sorter, filter); this.fetchData(page, sorter, filter);
this.$refs.table.page(page);
// this.$refs.table.sorter(sorter) : null); // this.$refs.table.sorter(sorter) : null);
console.warn("TCL: getDataByQuey -> filter", filter); console.warn("TCL: getDataByQuey -> filter", filter);
this.$refs.table.page(page);
this.$refs.table.filter(filter); this.$refs.table.filter(filter);
this.$refs.table.sort(sorter.field, sorter.order);
}, },
apiGetData(params = {}) { apiGetData(params = {}) {
this.loading = true; this.loading = true;
@ -258,6 +259,12 @@ export default {
}, },
this.$route this.$route
); );
sorter = sorter
? {
field: sorter.field,
order: sorter.order
}
: null;
if (window.location.pathname) if (window.location.pathname)
this.$router.push({ this.$router.push({
...this.$route, ...this.$route,

8
demo/documentation/components/table/enUS/filterAndSorter.md
View File

@ -127,14 +127,14 @@ export default {
console.log(filter, sorter, pagination); console.log(filter, sorter, pagination);
}, },
sortName() { sortName() {
this.$refs.table.sort("name", "ascend", false); this.$refs.table.sort("name", "ascend", true);
}, },
clearFilters() { clearFilters() {
this.$refs.table.filter(null, false); this.$refs.table.filter(null, true);
}, },
clearFiltersAndSorters() { clearFiltersAndSorters() {
this.$refs.table.filter(null, false); this.$refs.table.filter(null, true);
this.$refs.table.sort(null, false); this.$refs.table.sort(null, true);
}, },
tryRoute() { tryRoute() {
this.$router.push({ this.$router.push({

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

@ -248,7 +248,7 @@ export default {
}, },
data () { data () {
return { return {
isOnlyViewChange: false, triggerOnChange: false,
headerHeight: 0, headerHeight: 0,
copyData: [], copyData: [],
sortIndexs: {}, sortIndexs: {},
@ -641,16 +641,17 @@ export default {
} }
}) })
}, },
page (pageNum, isOnlyViewChange = true) { page (pageNum, triggerOnChange = false) {
this.isOnlyViewChange = isOnlyViewChange this.triggerOnChange = triggerOnChange
this.currentPage = pageNum
this.$nextTick(() => { this.$nextTick(() => {
this.isOnlyViewChange = !isOnlyViewChange this.currentPage = pageNum
this.triggerOnChange = !triggerOnChange
}) })
}, },
sort (columnKey, order, isOnlyViewChange = true) { sort (columnKey, order, triggerOnChange = false) {
this.isOnlyViewChange = isOnlyViewChange this.triggerOnChange = triggerOnChange
if (columnKey == null) { if (columnKey == null) {
this.clearSort() this.clearSort()
@ -658,11 +659,11 @@ export default {
} }
this.$set(this.sortIndexs, columnKey, sortOrderMap[order]) this.$set(this.sortIndexs, columnKey, sortOrderMap[order])
this.$nextTick(() => { this.$nextTick(() => {
this.isOnlyViewChange = !isOnlyViewChange this.triggerOnChange = !triggerOnChange
}) })
}, },
filter (filterOptions, isOnlyViewChange = true) { filter (filterOptions, triggerOnChange = false) {
this.isOnlyViewChange = isOnlyViewChange this.triggerOnChange = triggerOnChange
if (filterOptions === null) { if (filterOptions === null) {
this.selectedFilter = {} this.selectedFilter = {}
@ -677,10 +678,14 @@ export default {
this.selectedFilter = filterOptions this.selectedFilter = filterOptions
this.$nextTick(() => { this.$nextTick(() => {
this.isOnlyViewChange = !isOnlyViewChange this.triggerOnChange = !triggerOnChange
}) })
}, },
setParams ({ filter, sorter, page }) { /**
* @deprecated
* 废弃的,
*/
_setParams ({ filter, sorter, page }) {
if (sorter) { if (sorter) {
this.sort(sorter.key, sorter.order) this.sort(sorter.key, sorter.order)
} else { } else {
@ -814,7 +819,7 @@ export default {
// return isCustom ? this.currentSortColumn : null // return isCustom ? this.currentSortColumn : null
// }, // },
useRemoteChange () { useRemoteChange () {
if (this.isOnlyViewChange) return if (!this.triggerOnChange) return
clearTimeout(this.remoteTimter) clearTimeout(this.remoteTimter)
this.remoteTimter = setTimeout(() => { this.remoteTimter = setTimeout(() => {
@ -849,10 +854,6 @@ export default {
this.processedData = [] this.processedData = []
} }
Object.keys(this.currentFilterColumn).forEach(key => { Object.keys(this.currentFilterColumn).forEach(key => {
console.log(
'TCL: computeShowingData -> this.currentFilterColumn',
this.currentFilterColumn
)
const { value, filterFn } = this.currentFilterColumn[key] const { value, filterFn } = this.currentFilterColumn[key]
if (value && filterFn !== 'custom' && filterFn) { if (value && filterFn !== 'custom' && filterFn) {
data = data.filter(item => { data = data.filter(item => {