mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
Merge branch 'develop' of ***REMOVED*** into develop
This commit is contained in:
07akioni
commit
3357a9192f
22
demo/documentation/components/table/enUS/column.md
Normal file
22
demo/documentation/components/table/enUS/column.md
Normal file
@ -0,0 +1,22 @@
|
||||
# Columns
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| :--------------- | :-------------------------------------------------------------------------------------------------------- | :---------------------------- | :------ |
|
||||
| align | specify which way that column is aligned | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| ellipsis | ellipsize cell content,recommended when no property:render is used | boolean | false |
|
||||
| className | className of this column | boolean | false |
|
||||
| title | Title of this column | String | - |
|
||||
| key | Unique key of this column,**required** | string | - |
|
||||
| render | Renderer of the table cell. The return value should be a VueNode | Function(h, record, index) {} | - |
|
||||
| renderHeader | Renderer of the table header cell. The return value should be a VueNode | Function(h, column) {} | - |
|
||||
| sortable | use column sort, need property:sorter | boolean | false |
|
||||
| sorter | Sort function for local sort, see Array.sort's compareFunction.If you need network sorter,set to `custom` | Function \| 'custom' | - |
|
||||
| defaultSortOrder | default sort order | 'ascend' \| 'descend' | - |
|
||||
| filterable | use filter | boolean | false |
|
||||
| filter | Filter function for local filter.If you need network sorter,set to `custom` | Function \| 'custom' | - |
|
||||
| filterMultiple | Whether multiple filters can be selected | boolean | false |
|
||||
| defaultFilter | default filter selected | String | - |
|
||||
| filterItems | Filter menu config,format as [{label,value}] | object[] | - |
|
||||
| asyncFilterItems | async filter menu config ,Function returns [{label,value}] | Function | - |
|
||||
| fixed | Set column to be fixed: 'left' 'right' | 'left'\| 'right' | - |
|
||||
| width | Width of this column | string | number | - |
|
||||
@ -24,24 +24,6 @@ fixedHeaderColumn
|
||||
ellipsis
|
||||
renderHeader
|
||||
bestPractices
|
||||
property
|
||||
column
|
||||
```
|
||||
|
||||
## Column
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| :--------------- | :-------------------------------------------------------------------------------------------------------- | :---------------------------- | :------ |
|
||||
| align | specify which way that column is aligned | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| ellipsis | ellipsize cell content,recommended when no property:render is used | boolean | false |
|
||||
| className | className of this column | boolean | false |
|
||||
| title | Title of this column | String | - |
|
||||
| key | Unique key of this column,**required** | string | - |
|
||||
| render | Renderer of the table cell. The return value should be a VueNode | Function(h, record, index) {} | - |
|
||||
| sortable | use column sort, need property:sorter | boolean | false |
|
||||
| sorter | Sort function for local sort, see Array.sort's compareFunction.If you need network sorter,set to `custom` | Function \| 'custom' | - |
|
||||
| defaultSortOrder | default sort order | 'ascend' \| 'descend' | - |
|
||||
| filterable | use filter | boolean | false |
|
||||
| filter | Filter function for local filter.If you need network sorter,set to `custom` | Function \| 'custom' | - |
|
||||
| filterMultiple | Whether multiple filters can be selected | boolean | false |
|
||||
| defaultFilter | default filter selected | String | - |
|
||||
| filterItems | Filter menu config,format as [{label,value}] | object[] | - |
|
||||
| asyncFilterItems | async filter menu config ,Function returns [{label,value}] | Function | - |
|
||||
|
||||
11
demo/documentation/components/table/enUS/property.md
Normal file
11
demo/documentation/components/table/enUS/property.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Property
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------- | :------ |
|
||||
| data | Structured data displayed. | Array | - |
|
||||
| columns | Column configuration. Details are mentioned below. | Array | - |
|
||||
| max-height | The max-height of the table. Unit: px / When this prop is set, if the content height is larger then the set value, the header will be fixed at the top. | Number \| String | - |
|
||||
| row-class-name | Callback function for row's class name. Accept two arguments: -params: current row's data. -index: current row's index | Function | - |
|
||||
| loading | Whether the table is loading. | Boolean | false |
|
||||
| scroll-x | Set horizontal scrolling, can also be used to specify the width and height of the scroll area | number | - |
|
||||
| pagination | Config of pagination. | object | - |
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.6.2",
|
||||
"version": "0.6.3",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -183,7 +183,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.currentHoverRow' (index, oldIndex) {
|
||||
'$tableStore.state.currentHoverRow' (index, oldIndex) {
|
||||
const hoverClassName = 'n-table__tr--hover'
|
||||
const rowsDom = this.$el.querySelectorAll('table tr')
|
||||
const oldRowDom = rowsDom[oldIndex]
|
||||
@ -206,16 +206,16 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onMouseEnter (e) {
|
||||
this.$store.commit('currentTableEl', e.currentTarget)
|
||||
this.$tableStore.commit('currentTableEl', e.currentTarget)
|
||||
},
|
||||
onMouseLeave (e) {
|
||||
this.$store.commit('currentTableEl', null)
|
||||
this.$tableStore.commit('currentTableEl', null)
|
||||
},
|
||||
onRowHover (e, rowData, index) {
|
||||
this.$store.commit('currentHoverRow', index)
|
||||
this.$tableStore.commit('currentHoverRow', index)
|
||||
},
|
||||
onRowLeave (e, rowData) {
|
||||
this.$store.commit('currentHoverRow', null)
|
||||
this.$tableStore.commit('currentHoverRow', null)
|
||||
},
|
||||
computeCustomWidthStl (column) {
|
||||
if (column.width) {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
v-for="(column, i) in columns"
|
||||
:key="i"
|
||||
:style="computeCustomWidthStl(column)"
|
||||
>
|
||||
/>
|
||||
|
||||
<!-- <col v-if="scrollBarWidth" :width="scrollBarWidth" > -->
|
||||
</colgroup>
|
||||
@ -34,7 +34,7 @@
|
||||
<!-- 当前页全选 -->
|
||||
<n-checkbox
|
||||
v-if="column.type === 'selection'"
|
||||
:checked="$store.state.selectedAllChecked"
|
||||
:checked="$tableStore.state.selectedAllChecked"
|
||||
:indeterminate="isCheckedBoxAllIndeterminate"
|
||||
@change="selectedAllCheckedChange"
|
||||
@click.native="onAllCheckboxesClick"
|
||||
@ -238,7 +238,7 @@ export default {
|
||||
this.$emit('on-checkbox-all', this.currentPageAllSelect)
|
||||
},
|
||||
selectedAllCheckedChange (v) {
|
||||
this.$store.commit('selectedAllChecked', v)
|
||||
this.$tableStore.commit('selectedAllChecked', v)
|
||||
},
|
||||
onFilter (value, column) {
|
||||
this.$emit('on-filter', value, column)
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
import { noopFn } from '../../../utils/index'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
import { Store, storageMixin } from '../store'
|
||||
import { storageMixin } from '../store'
|
||||
import BaseTable from '../baseTable/baseTable'
|
||||
|
||||
const sortOrderMap = {
|
||||
@ -160,9 +160,6 @@ const sortOrderReverseMap = {
|
||||
}
|
||||
|
||||
export default {
|
||||
store () {
|
||||
return new Store()
|
||||
},
|
||||
name: 'NAdvancedTable',
|
||||
components: {
|
||||
// searchInput,
|
||||
@ -479,7 +476,7 @@ export default {
|
||||
this.checkBoxes = []
|
||||
this.disabledCheckBox = []
|
||||
this.currentPageAllSelect = false
|
||||
this.$store.commit('selectedAllChecked', false)
|
||||
this.$tableStore.commit('selectedAllChecked', false)
|
||||
|
||||
this.computeScollBar()
|
||||
},
|
||||
@ -580,7 +577,7 @@ export default {
|
||||
})
|
||||
},
|
||||
onBodyScrolll (event) {
|
||||
const currentEl = this.$store.state.currentTableEl
|
||||
const currentEl = this.$tableStore.state.currentTableEl
|
||||
const scrollEls = [
|
||||
this.fixedLeftTBodyEl,
|
||||
this.mainTBodyEl,
|
||||
@ -721,7 +718,7 @@ export default {
|
||||
(this.currentPageSelectedLen > 0 &&
|
||||
this.currentPageSelectedLen === this.showingData.length) ||
|
||||
this.isCheckedBoxAllIndeterminate
|
||||
this.$store.commit('selectedAllChecked', needChecked)
|
||||
this.$tableStore.commit('selectedAllChecked', needChecked)
|
||||
},
|
||||
computePageDivideData (data) {
|
||||
if (this.pagination && this.pagination.limit && !this.pagination.custom) {
|
||||
@ -767,7 +764,7 @@ export default {
|
||||
},
|
||||
onAllCheckboxesClick () {
|
||||
this.showingData.forEach(item => {
|
||||
this.checkBoxes[item._index] = this.$store.state.selectedAllChecked
|
||||
this.checkBoxes[item._index] = this.$tableStore.state.selectedAllChecked
|
||||
})
|
||||
this.checkBoxes = [].concat(this.checkBoxes)
|
||||
},
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
* @Author: Volankey@gmail.com
|
||||
* @Company: Tusimple
|
||||
* @Date: 2019-10-25 11:31:12
|
||||
* @LastEditors: Jiwen.bai
|
||||
* @LastEditTime: 2019-11-07 11:13:03
|
||||
* @LastEditors : Jiwen.bai
|
||||
* @LastEditTime : 2019-12-18 17:46:19
|
||||
*/
|
||||
let Vue = null
|
||||
export class Store {
|
||||
@ -35,11 +35,10 @@ function vuexInit () {
|
||||
Vue = _Vue
|
||||
}
|
||||
// store injection
|
||||
if (options.store) {
|
||||
this.$store =
|
||||
typeof options.store === 'function' ? options.store() : options.store
|
||||
} else if (options.parent && options.parent.$store) {
|
||||
this.$store = options.parent.$store
|
||||
if (options.parent && options.parent.$tableStore) {
|
||||
this.$tableStore = options.parent.$tableStore
|
||||
} else if (!this.$tableStore) {
|
||||
this.$tableStore = new Store()
|
||||
}
|
||||
}
|
||||
export const storageMixin = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user