lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
xuliangzhan
2019-09-07 17:41:02 +08:00
parent a047809d8a
commit 30bf892ffd
24 changed files with 155 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/views/table/edit/AutoClear.vue
View File

@@ -87,7 +87,9 @@ export default {
this.cancelRowEvent()
},
cancelRowEvent (row) {
this.$refs.xTable.clearActived()
let xTable = this.$refs.xTable
xTable.clearActived()
.then(() => xTable.revertData(row))
}
}
}
@@ -112,7 +114,9 @@ export default {
this.$refs.xTable.clearActived()
},
cancelRowEvent (row) {
this.$refs.xTable.clearActived()
let xTable = this.$refs.xTable
xTable.clearActived()
.then(() => xTable.revertData(row))
}
}
}

8
examples/views/table/edit/Select.vue
View File

@@ -10,8 +10,8 @@
:edit-config="{trigger: 'click', mode: 'cell'}">
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
@@ -40,8 +40,8 @@ export default {
:edit-config="{trigger: 'click', mode: 'cell'}">
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
<vxe-table-column field="date" title="Date" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
</vxe-table>
`,
`

5
examples/views/table/other/SortableColumn.vue
View File

@@ -22,7 +22,10 @@
<code class="css">{{ demoCodes[2] }}</code>
</pre>
<p class="tip"><grid-api-link name="vxe-grid"/> 方式，更加简单的配置式调用</p>
<p class="tip">
<grid-api-link name="vxe-grid"/> 方式，更加简单的配置式调用<br>
<span class="red">注意：固定列是无法拖动的，需要自行限制</span>
</p>
<vxe-grid
border

21
examples/views/table/other/SortableRow.vue
View File

@@ -34,7 +34,11 @@
<code class="css">{{ demoCodes[2] }}</code>
</pre>
<p class="tip"><grid-api-link name="vxe-grid"/> 方式：树表格的移动也是一样的，由于树节点的深层结构，所以需要在树节点在变动之后调用 <table-api-link prop="refreshData"/> 方法刷新数据</p>
<p class="tip">
<grid-api-link name="vxe-grid"/> 方式：树表格的移动也是一样的<br>
由于树节点的深层结构，所以需要在树节点在变动之后调用 <table-api-link prop="refreshData"/> 方法刷新数据<br>
<span class="red">注意：树结构虽然可以任意跨层级拖动，但需要自行限制自己不能往自己子节点拖动</span>
</p>
<vxe-grid
border
@@ -58,6 +62,7 @@
<script>
import hljs from 'highlight.js'
import Sortable from 'sortablejs'
import XEUtils from 'xe-utils'
export default {
data () {
@@ -225,12 +230,12 @@ export default {
let prevTrElem = targetTrElem.previousElementSibling
let tableTreeData = this.tableTreeData
let selfRow = xTable.getRowNode(targetTrElem).item
let selfNode = this.$utils.findTree(tableTreeData, row => row === selfRow, options)
let selfNode = XEUtils.findTree(tableTreeData, row => row === selfRow, options)
if (prevTrElem) {
// 移动到节点
let prevRow = xTable.getRowNode(prevTrElem).item
let prevNode = this.$utils.findTree(tableTreeData, row => row === prevRow, options)
if (this.$utils.findTree(selfRow[options.children], row => prevRow === row, options)) {
let prevNode = XEUtils.findTree(tableTreeData, row => row === prevRow, options)
if (XEUtils.findTree(selfRow[options.children], row => prevRow === row, options)) {
// 错误的移动
let oldTrElem = wrapperElem.children[oldIndex]
wrapperElem.insertBefore(targetTrElem, oldTrElem)
@@ -273,7 +278,7 @@ export default {
},
created () {
this.tableData = window.MOCK_DATA_LIST.slice(0, 6)
this.tableTreeData = this.$utils.clone(window.MOCK_TREE_DATA_LIST, true)
this.tableTreeData = XEUtils.clone(window.MOCK_TREE_DATA_LIST, true)
this.rowDrop()
this.treeDrop()
},
@@ -315,12 +320,12 @@ export default {
let prevTrElem = targetTrElem.previousElementSibling
let tableTreeData = this.tableTreeData
let selfRow = xTable.getRowNode(targetTrElem).item
let selfNode = this.$utils.findTree(tableTreeData, row => row === selfRow, options)
let selfNode = XEUtils.findTree(tableTreeData, row => row === selfRow, options)
if (prevTrElem) {
// 移动到节点
let prevRow = xTable.getRowNode(prevTrElem).item
let prevNode = this.$utils.findTree(tableTreeData, row => row === prevRow, options)
if (this.$utils.findTree(selfRow[options.children], row => prevRow === row, options)) {
let prevNode = XEUtils.findTree(tableTreeData, row => row === prevRow, options)
if (XEUtils.findTree(selfRow[options.children], row => prevRow === row, options)) {
// 错误的移动
let oldTrElem = wrapperElem.children[oldIndex]
wrapperElem.insertBefore(targetTrElem, oldTrElem)