mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
fix: merge conflict
This commit is contained in:
07akioni
commit
4537a180e9
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
本地排序,分页,搜索,过滤(多选过滤\单选过滤\异步过滤选项加载),本地删除
|
||||
本地排序,分页,搜索,过滤(多选过滤\单选过滤\异步过滤选项加载),本地删除,
|
||||
<br>
|
||||
多选删除(注意:data数据发生变化后,多选的状态将会被清空)
|
||||
<br>
|
||||
行添加className
|
||||
</div>
|
||||
@ -11,6 +13,7 @@
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-advance-table
|
||||
ref="table"
|
||||
:row-class-name="computeRowcls"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@ -18,7 +21,23 @@
|
||||
:search="search"
|
||||
:pagination="{total:data.length,limit:10}"
|
||||
@on-change="onChange"
|
||||
/>
|
||||
@on-selected-change="onSelectedChange"
|
||||
>
|
||||
<div
|
||||
slot="table-operation-batch-left"
|
||||
style="padding-left:27px;"
|
||||
>
|
||||
<n-icon
|
||||
v-show="selectedRow.length"
|
||||
color="rgba(255,255,255,.7)"
|
||||
type="md-trash"
|
||||
size="24"
|
||||
title="delete all"
|
||||
style="cursor:pointer;"
|
||||
@click="batchDelete"
|
||||
/>
|
||||
</div>
|
||||
</n-advance-table>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
@ -50,6 +69,9 @@ const sex = [
|
||||
]
|
||||
const _columns3 = ($this) => {
|
||||
return [
|
||||
{
|
||||
type: 'selection'
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
@ -115,6 +137,7 @@ export default {
|
||||
const columns = _columns3(this)
|
||||
|
||||
return {
|
||||
selectedRow: [],
|
||||
columns,
|
||||
data: [],
|
||||
query: {},
|
||||
@ -140,8 +163,18 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.data = this.getData()
|
||||
// data一定要先有值才可以再selectRow
|
||||
this.$refs.table.selectRow([1, 2, 5])
|
||||
// this.$refs.table.selectRow('all') // 可以全选当前展示数据
|
||||
},
|
||||
methods: {
|
||||
batchDelete () {
|
||||
this.selectedRow.forEach((item) => {
|
||||
let index = item._index
|
||||
this.data[index] = null
|
||||
})
|
||||
this.data = this.data.filter(item => item !== null)
|
||||
},
|
||||
computeRowcls (params) {
|
||||
if (params.row.age > 15) {
|
||||
return 'age-too-old'
|
||||
@ -151,7 +184,8 @@ export default {
|
||||
handleDelete (params) {
|
||||
let index = params._index
|
||||
this.data.splice(index, 1)
|
||||
this.$NMessage.success('Delete successfully', { duration: 2000 })
|
||||
this.$NMessage.success('Delete successfully,', { duration: 2000 })
|
||||
this.$NMessage.warning('Data change,selected will be clear!', { duration: 4000 })
|
||||
},
|
||||
getData (args) {
|
||||
console.log('TCL: getData -> args', args)
|
||||
@ -166,6 +200,10 @@ export default {
|
||||
})
|
||||
return d
|
||||
},
|
||||
onSelectedChange (selectedRow) {
|
||||
console.log(selectedRow)
|
||||
this.selectedRow = selectedRow
|
||||
},
|
||||
onChange (args) {
|
||||
console.log('TCL: onChange -> args', args)
|
||||
/**
|
||||
|
||||
@ -63,8 +63,22 @@ const data = [
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'selectRow',
|
||||
desc: '可以在mounted里selectRow来进行选中某一行,当为字符串all时,选中当前显示所有行,当为数组时,选中行号-1的行(注意data数据要已经存在)',
|
||||
params: [
|
||||
{
|
||||
name: 'rowIndexs Array|String',
|
||||
desc: `
|
||||
[0,1,2]
|
||||
all
|
||||
`
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
export default {
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
<<<<<<< HEAD
|
||||
"version": "0.2.124",
|
||||
=======
|
||||
"version": "0.2.125",
|
||||
>>>>>>> c1c36d1a3bcf2b8c20a364d5143cee8efa1e0496
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -51,6 +51,12 @@
|
||||
:key="column.key"
|
||||
:style="computeAlign(column)"
|
||||
>
|
||||
<n-checkbox
|
||||
v-if="column.type === 'selection'"
|
||||
v-model="allCheckboxesSelect"
|
||||
:indeterminate="!isCheckedBoxAllIndeterminate"
|
||||
@click.native="onAllCheckboxesClick"
|
||||
/>
|
||||
{{ column.title }}
|
||||
<SortIcon
|
||||
v-if="column.sortable"
|
||||
@ -120,7 +126,12 @@
|
||||
:style="computeAlign(column)"
|
||||
:class="computeTdClass(column, rowData)"
|
||||
>
|
||||
<n-checkbox
|
||||
v-if="column.type === 'selection'"
|
||||
v-model="checkBoxes[rowData._index]"
|
||||
/>
|
||||
<row
|
||||
v-else
|
||||
:index="i"
|
||||
:row="rowData"
|
||||
:key-name="column.key"
|
||||
@ -169,6 +180,7 @@ import PopFilter from '../popFilter'
|
||||
import searchInput from '../searchInput'
|
||||
import Loading from '../loading'
|
||||
import { noopFn } from '../../../utils/index'
|
||||
|
||||
export default {
|
||||
name: 'NAdvanceTable',
|
||||
components: {
|
||||
@ -246,22 +258,8 @@ export default {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
// const sortIndexs = {}
|
||||
// this.columns.forEach((column, idx) => {
|
||||
// sortIndexs[column.key || idx] = column.order ? column.order : 0
|
||||
// })
|
||||
// const sortIndexs = new Array(this.columns.length).fill(0).map((item, idx) => {
|
||||
// return this.columns[idx].order ? this.columns[idx].order : 0
|
||||
// })
|
||||
// console.log(sortIndexs)
|
||||
let copyData = this.data.slice(0).map((row, idx) => {
|
||||
return {
|
||||
row,
|
||||
_index: idx
|
||||
}
|
||||
})
|
||||
return {
|
||||
copyData,
|
||||
copyData: [],
|
||||
sortIndexs: {},
|
||||
wrapperWidth: 'unset',
|
||||
tbodyWidth: 'auto;',
|
||||
@ -271,7 +269,9 @@ export default {
|
||||
currentFilterColumn: null,
|
||||
currentSearchColumn: null,
|
||||
currentPage: 1,
|
||||
selectedFilter: {}
|
||||
selectedFilter: {},
|
||||
checkBoxes: [],
|
||||
allCheckboxesSelect: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -355,6 +355,25 @@ export default {
|
||||
(this.wrapperWidth - this.scrollBarWidth) /
|
||||
this.columns.length
|
||||
).toFixed(3)
|
||||
},
|
||||
selectedRows () {
|
||||
return this.checkBoxes
|
||||
.map((isChecked, idx) => {
|
||||
if (isChecked) {
|
||||
return this.copyData[idx]
|
||||
}
|
||||
})
|
||||
.filter((item) => item !== void 0)
|
||||
},
|
||||
isCheckedBoxAllIndeterminate () {
|
||||
let selectedLen = 0
|
||||
this.showingData.forEach((item) => {
|
||||
let realIdx = item._index
|
||||
if (this.checkBoxes[realIdx] === true) {
|
||||
selectedLen++
|
||||
}
|
||||
})
|
||||
return selectedLen === this.showingData.length || selectedLen === 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -367,14 +386,11 @@ export default {
|
||||
this.$emit('on-page-change', this.paginationer)
|
||||
},
|
||||
data () {
|
||||
this.copyData = this.data.slice(0).map((row, idx) => {
|
||||
return {
|
||||
row,
|
||||
_index: idx
|
||||
}
|
||||
})
|
||||
this.initData()
|
||||
this.searchData = this.computeShowingData()
|
||||
this.searchDataNoSort = null
|
||||
this.checkBoxes = []
|
||||
this.allCheckboxesSelect = false
|
||||
},
|
||||
currentSearchColumn () {
|
||||
this.searchData = this.computeShowingData()
|
||||
@ -383,6 +399,15 @@ export default {
|
||||
this.searchData = this.computeShowingData()
|
||||
console.log('currentSortColumn')
|
||||
},
|
||||
checkBoxes () {
|
||||
if (
|
||||
this.selectedRows.length === this.showingData.length &&
|
||||
this.showingData.length !== 0
|
||||
) {
|
||||
this.allCheckboxesSelect = true
|
||||
}
|
||||
this.$emit('on-selected-change', this.selectedRows)
|
||||
},
|
||||
selectedFilter: {
|
||||
deep: true,
|
||||
handler (val) {
|
||||
@ -396,7 +421,9 @@ export default {
|
||||
let key = column.key
|
||||
if (keys.includes(key) && val[key] && val[key].length !== 0) {
|
||||
// TODO: 未来版本单选将会返回一个数值而不是数组!
|
||||
console.warn('[NAIVE-UI]: n-advance-table filter filterMultiple=false will return not a array in future')
|
||||
console.warn(
|
||||
'[NAIVE-UI]: n-advance-table filter filterMultiple=false will return not a array in future'
|
||||
)
|
||||
this.currentFilterColumn[key] = {
|
||||
value: [].concat(val[key]),
|
||||
filterFn: column.onFilter
|
||||
@ -415,6 +442,9 @@ export default {
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.initData()
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.relTable = this.$refs.tbody.$el.querySelector('table')
|
||||
@ -433,6 +463,14 @@ export default {
|
||||
// window.removeEventListener('resize', this.init)
|
||||
},
|
||||
methods: {
|
||||
initData () {
|
||||
this.copyData = this.data.slice(0).map((row, idx) => {
|
||||
return {
|
||||
row,
|
||||
_index: idx
|
||||
}
|
||||
})
|
||||
},
|
||||
computeAlign (column) {
|
||||
if (column.align) {
|
||||
return {
|
||||
@ -456,6 +494,26 @@ export default {
|
||||
// console.log(className)
|
||||
return className
|
||||
},
|
||||
selectRow (rowIndexs = []) {
|
||||
this.$nextTick(() => {
|
||||
if (rowIndexs === 'all') {
|
||||
this.showingData.forEach((item) => {
|
||||
this.checkBoxes[item._index] = true
|
||||
})
|
||||
this.checkBoxes = [].concat(this.checkBoxes)
|
||||
} else {
|
||||
if (this.showingData.length > 0) {
|
||||
rowIndexs.forEach((idx) => {
|
||||
if (this.showingData[idx]) {
|
||||
const realIdx = this.showingData[idx]._index
|
||||
this.checkBoxes[realIdx] = true
|
||||
}
|
||||
})
|
||||
this.checkBoxes = [].concat(this.checkBoxes)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* {key:[value,value1],key1:[v1,v2]}
|
||||
* {key:value}
|
||||
@ -471,9 +529,10 @@ export default {
|
||||
// clear
|
||||
this.clearSort()
|
||||
}
|
||||
this.currentFilterColumn && Object.keys(this.currentFilterColumn).forEach(key => {
|
||||
this.selectedFilter = {}
|
||||
})
|
||||
this.currentFilterColumn &&
|
||||
Object.keys(this.currentFilterColumn).forEach((key) => {
|
||||
this.selectedFilter = {}
|
||||
})
|
||||
if (filter) {
|
||||
// ---- TODO: 未来版本将会去除这段代码,为了兼容老版本
|
||||
Object.keys(filter).forEach((key) => {
|
||||
@ -489,9 +548,9 @@ export default {
|
||||
// ----
|
||||
this.selectedFilter = filter
|
||||
}
|
||||
if (searcher) {
|
||||
if (searcher && this.search) {
|
||||
this.$refs.search.setSearch(searcher)
|
||||
} else {
|
||||
} else if (!searcher && this.search) {
|
||||
this.$refs.search.clearSearch()
|
||||
}
|
||||
if (page) {
|
||||
@ -518,8 +577,15 @@ export default {
|
||||
let width = column.width
|
||||
return {
|
||||
width: width + 'px',
|
||||
'padding-right': this.scrollBarWidth + 'px',
|
||||
minWidth: width + 'px'
|
||||
'padding-right': this.scrollBarWidth + 'px'
|
||||
// minWidth: width + 'px'
|
||||
}
|
||||
} else if (column.type === 'selection') {
|
||||
let width = 60
|
||||
return {
|
||||
width: width + 'px',
|
||||
'padding-right': this.scrollBarWidth + 'px'
|
||||
// minWidth: width + 'px'
|
||||
}
|
||||
}
|
||||
return null
|
||||
@ -533,6 +599,17 @@ export default {
|
||||
// this.scrollBarWidth = 5
|
||||
})
|
||||
},
|
||||
onAllCheckboxesClick () {
|
||||
console.log(
|
||||
'TCL: onAllCheckboxesClick -> this.allCheckboxesSelect',
|
||||
this.allCheckboxesSelect
|
||||
)
|
||||
|
||||
this.showingData.forEach((item) => {
|
||||
this.checkBoxes[item._index] = this.allCheckboxesSelect
|
||||
})
|
||||
this.checkBoxes = [].concat(this.checkBoxes)
|
||||
},
|
||||
handleSearch ({ key, word }) {
|
||||
this.currentSearchColumn = {
|
||||
key,
|
||||
@ -556,7 +633,7 @@ export default {
|
||||
let keys = Object.keys(this.currentFilterColumn)
|
||||
currentFilterColumn = {}
|
||||
|
||||
keys.forEach(key => {
|
||||
keys.forEach((key) => {
|
||||
let val = this.currentFilterColumn[key].value
|
||||
let filterFn = this.currentFilterColumn[key].filterFn
|
||||
if (filterFn === 'custom') {
|
||||
@ -578,7 +655,7 @@ export default {
|
||||
let keys = Object.keys(this.currentSortColumn)
|
||||
currentSortColumn = {}
|
||||
|
||||
keys.forEach(key => {
|
||||
keys.forEach((key) => {
|
||||
let val = this.currentSortColumn[key].value
|
||||
let sortable = this.currentSortColumn[key].sortable
|
||||
if (sortable === 'custom') {
|
||||
|
||||
@ -202,12 +202,6 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedOptions (n) {
|
||||
if (this.formItem) {
|
||||
let vals = n.map(i => i.value)
|
||||
this.dispatch('NFormItem', 'on-form-change', vals)
|
||||
}
|
||||
},
|
||||
filteredOptions () {
|
||||
this.$nextTick().then(() => {
|
||||
this.updatePosition()
|
||||
@ -217,6 +211,9 @@ export default {
|
||||
})
|
||||
},
|
||||
value () {
|
||||
if (this.formItem) {
|
||||
this.dispatch('NFormItem', 'on-form-change', this.value)
|
||||
}
|
||||
this.$nextTick().then(() => {
|
||||
this.updatePosition()
|
||||
if (this.$refs.scrollbar) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user