mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
增加 Pulldown 下拉容器
This commit is contained in:
xuliangzhan
@@ -23,6 +23,7 @@ import {
|
||||
Select,
|
||||
Switch,
|
||||
List,
|
||||
Pulldown,
|
||||
|
||||
Edit,
|
||||
Export,
|
||||
@@ -80,6 +81,7 @@ Vue.use(Form)
|
||||
Vue.use(Select)
|
||||
Vue.use(Switch)
|
||||
Vue.use(List)
|
||||
Vue.use(Pulldown)
|
||||
|
||||
Vue.use(Edit)
|
||||
Vue.use(Export)
|
||||
|
||||
175
examples/plugins/xtable/renderer/components/EditDownModal.vue
Normal file
175
examples/plugins/xtable/renderer/components/EditDownModal.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="edit-down-modal">
|
||||
<vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
|
||||
<template>
|
||||
<vxe-input class="edit-down-input" v-model="row[column.property]" @keyup="keyupEvent" @click="clickEvent"></vxe-input>
|
||||
</template>
|
||||
<template v-slot:dropdown>
|
||||
<div class="edit-down-wrapper">
|
||||
<vxe-grid
|
||||
highlight-hover-row
|
||||
auto-resize
|
||||
height="auto"
|
||||
:loading="loading"
|
||||
:pager-config="tablePage"
|
||||
:data="tableData"
|
||||
:columns="tableColumn1"
|
||||
@cell-click="selectEvent"
|
||||
@page-change="pageChangeEvent">
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-pulldown>
|
||||
<vxe-button class="edit-popup-button" status="primary" @click="popupEvent">选择</vxe-button>
|
||||
<vxe-modal
|
||||
show-footer
|
||||
resize
|
||||
class="vxe-table--ignore-clear edit-popup-box"
|
||||
title="选择多条"
|
||||
width="800"
|
||||
height="400"
|
||||
v-model="modalVisible"
|
||||
@confirm="confirmEvent">
|
||||
<vxe-grid
|
||||
highlight-hover-row
|
||||
auto-resize
|
||||
ref="xGrid"
|
||||
height="auto"
|
||||
:loading="loading"
|
||||
:pager-config="tablePage"
|
||||
:data="tableData"
|
||||
:columns="tableColumn"
|
||||
@page-change="pageChangeEvent">
|
||||
</vxe-grid>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditDownModal',
|
||||
props: {
|
||||
params: Object,
|
||||
renderOpts: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
row: null,
|
||||
column: null,
|
||||
modalVisible: false,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableColumn1: [
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tableColumn: [
|
||||
{ type: 'checkbox', width: 80 },
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tablePage: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
params () {
|
||||
this.load()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
const { row, column } = this.params
|
||||
this.row = row
|
||||
this.column = column
|
||||
this.getData().then(data => {
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
getData () {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const list = [
|
||||
{ name: 'Test1', role: '前端', sex: '男' },
|
||||
{ name: 'Test2', role: '后端', sex: '男' },
|
||||
{ name: 'Test3', role: '测试', sex: '男' },
|
||||
{ name: 'Test4', role: '设计师', sex: '女' },
|
||||
{ name: 'Test5', role: '前端', sex: '男' },
|
||||
{ name: 'Test6', role: '前端', sex: '男' },
|
||||
{ name: 'Test7', role: '前端', sex: '男' }
|
||||
]
|
||||
resolve(list)
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
popupEvent () {
|
||||
this.modalVisible = true
|
||||
},
|
||||
pageChangeEvent ({ currentPage, pageSize }) {
|
||||
this.tablePage.currentPage = currentPage
|
||||
this.tablePage.pageSize = pageSize
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
clickEvent () {
|
||||
this.$refs.xDown.showPanel()
|
||||
},
|
||||
keyupEvent () {
|
||||
const { row, column } = this
|
||||
const cellValue = row[column.property]
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
if (cellValue) {
|
||||
this.tableData = data.filter(item => item.name.indexOf(cellValue) > -1)
|
||||
} else {
|
||||
this.tableData = data
|
||||
}
|
||||
})
|
||||
},
|
||||
selectEvent (params) {
|
||||
const { renderOpts, row, column } = this
|
||||
const { props = {} } = renderOpts
|
||||
row[column.property] = params.row[props.checkField]
|
||||
this.$refs.xDown.hidePanel()
|
||||
},
|
||||
confirmEvent () {
|
||||
const { row, column } = this
|
||||
const selectRecords = this.$refs.xGrid.getCheckboxRecords()
|
||||
row[column.property] = `${selectRecords.length}条`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-down-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.edit-down-pulldown {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.edit-down-wrapper {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.edit-popup-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
134
examples/plugins/xtable/renderer/components/EditDownTable.vue
Normal file
134
examples/plugins/xtable/renderer/components/EditDownTable.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="edit-down-table">
|
||||
<vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
|
||||
<template>
|
||||
<vxe-input class="edit-down-input" v-model="row[column.property]" suffix-icon="fa fa-caret-down" @keyup="keyupEvent" @click="clickEvent" @suffix-click="suffixClick"></vxe-input>
|
||||
</template>
|
||||
<template v-slot:dropdown>
|
||||
<div class="edit-down-wrapper">
|
||||
<vxe-grid
|
||||
highlight-hover-row
|
||||
auto-resize
|
||||
height="auto"
|
||||
:loading="loading"
|
||||
:pager-config="tablePage"
|
||||
:data="tableData"
|
||||
:columns="tableColumn"
|
||||
@cell-click="selectEvent"
|
||||
@page-change="pageChangeEvent">
|
||||
</vxe-grid>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-pulldown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditDownTable',
|
||||
props: {
|
||||
params: Object,
|
||||
renderOpts: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
row: null,
|
||||
column: null,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableColumn: [
|
||||
{ type: 'seq' },
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tablePage: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
params () {
|
||||
this.load()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
const { row, column } = this.params
|
||||
this.row = row
|
||||
this.column = column
|
||||
this.getData().then(data => {
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
getData () {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const list = [
|
||||
{ name: 'Test1', role: '前端', sex: '男' },
|
||||
{ name: 'Test2', role: '后端', sex: '男' },
|
||||
{ name: 'Test3', role: '测试', sex: '男' },
|
||||
{ name: 'Test4', role: '设计师', sex: '女' },
|
||||
{ name: 'Test5', role: '前端', sex: '男' },
|
||||
{ name: 'Test6', role: '前端', sex: '男' },
|
||||
{ name: 'Test7', role: '前端', sex: '男' }
|
||||
]
|
||||
resolve(list)
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
clickEvent () {
|
||||
this.$refs.xDown.showPanel()
|
||||
},
|
||||
keyupEvent () {
|
||||
const { row, column } = this
|
||||
const cellValue = row[column.property]
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
if (cellValue) {
|
||||
this.tableData = data.filter(item => item.name.indexOf(cellValue) > -1)
|
||||
} else {
|
||||
this.tableData = data
|
||||
}
|
||||
})
|
||||
},
|
||||
suffixClick () {
|
||||
this.$refs.xDown.togglePanel()
|
||||
},
|
||||
pageChangeEvent ({ currentPage, pageSize }) {
|
||||
this.tablePage.currentPage = currentPage
|
||||
this.tablePage.pageSize = pageSize
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
selectEvent (params) {
|
||||
const { renderOpts, row, column } = this
|
||||
const { props = {} } = renderOpts
|
||||
row[column.property] = params.row[props.checkField]
|
||||
this.$refs.xDown.hidePanel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-down-pulldown {
|
||||
width: 100%;
|
||||
}
|
||||
.edit-down-wrapper {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="edit-down-textarea">
|
||||
<vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
|
||||
<template>
|
||||
<vxe-input class="edit-down-input" v-model="row[column.property]" @click="clickEvent" readonly></vxe-input>
|
||||
</template>
|
||||
<template v-slot:dropdown>
|
||||
<div class="edit-down-wrapper">
|
||||
<vxe-textarea ref="xText" class="edit-down-text" v-model="row[column.property]" resize="none" maxlength="1000" show-word-count></vxe-textarea>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-pulldown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditDownTextarea',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
row: null,
|
||||
column: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
params () {
|
||||
this.load()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
const { row, column } = this.params
|
||||
this.row = row
|
||||
this.column = column
|
||||
},
|
||||
clickEvent () {
|
||||
this.$refs.xDown.showPanel().then(() => {
|
||||
this.$refs.xText.focus()
|
||||
})
|
||||
},
|
||||
suffixClick () {
|
||||
this.$refs.xDown.togglePanel()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-down-pulldown {
|
||||
width: 100%;
|
||||
}
|
||||
.edit-down-wrapper {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.edit-down-text {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
120
examples/plugins/xtable/renderer/components/EditPopupModal.vue
Normal file
120
examples/plugins/xtable/renderer/components/EditPopupModal.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="edit-popup-modal">
|
||||
<vxe-input class="edit-popup-input" v-model="row[column.property]" placeholder="请选择"></vxe-input>
|
||||
<vxe-button class="edit-popup-button" icon="fa fa-list" type="text" @click="popupEvent"></vxe-button>
|
||||
<vxe-modal
|
||||
show-footer
|
||||
resize
|
||||
class="vxe-table--ignore-clear edit-popup-box"
|
||||
width="800"
|
||||
height="400"
|
||||
v-model="modalVisible"
|
||||
@confirm="confirmEvent">
|
||||
<vxe-grid
|
||||
highlight-hover-row
|
||||
auto-resize
|
||||
ref="xGrid"
|
||||
height="auto"
|
||||
:loading="loading"
|
||||
:pager-config="tablePage"
|
||||
:data="tableData"
|
||||
:columns="tableColumn"
|
||||
@page-change="pageChangeEvent">
|
||||
</vxe-grid>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EditPopupModal',
|
||||
props: {
|
||||
params: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
row: null,
|
||||
column: null,
|
||||
modalVisible: false,
|
||||
loading: false,
|
||||
tableData: [],
|
||||
tableColumn: [
|
||||
{ type: 'checkbox', width: 80 },
|
||||
{ field: 'name', title: 'Name' },
|
||||
{ field: 'role', title: 'Role' },
|
||||
{ field: 'sex', title: 'Sex' }
|
||||
],
|
||||
tablePage: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
params () {
|
||||
this.load()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
const { row, column } = this.params
|
||||
this.row = row
|
||||
this.column = column
|
||||
this.getData().then(data => {
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
getData () {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
const list = [
|
||||
{ name: 'Test1', role: '前端', sex: '男' },
|
||||
{ name: 'Test2', role: '后端', sex: '男' },
|
||||
{ name: 'Test3', role: '测试', sex: '男' },
|
||||
{ name: 'Test4', role: '设计师', sex: '女' },
|
||||
{ name: 'Test5', role: '前端', sex: '男' },
|
||||
{ name: 'Test6', role: '前端', sex: '男' },
|
||||
{ name: 'Test7', role: '前端', sex: '男' }
|
||||
]
|
||||
resolve(list)
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
popupEvent () {
|
||||
this.modalVisible = true
|
||||
},
|
||||
pageChangeEvent ({ currentPage, pageSize }) {
|
||||
this.tablePage.currentPage = currentPage
|
||||
this.tablePage.pageSize = pageSize
|
||||
this.loading = true
|
||||
this.getData().then(data => {
|
||||
this.loading = false
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
confirmEvent () {
|
||||
const { row, column } = this
|
||||
const selectRecords = this.$refs.xGrid.getCheckboxRecords()
|
||||
row[column.property] = `${selectRecords.length}条`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.edit-popup-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.edit-popup-input {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.edit-popup-button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,24 @@
|
||||
import Vue from 'vue'
|
||||
import VXETable from '../../../../packages/v-x-e-table'
|
||||
|
||||
import EditDownTable from './components/EditDownTable.vue'
|
||||
import EditPopupModal from './components/EditPopupModal.vue'
|
||||
import EditDownModal from './components/EditDownModal.vue'
|
||||
import EditDownTextarea from './components/EditDownTextarea.vue'
|
||||
|
||||
Vue.component(EditDownTable.name, EditDownTable)
|
||||
Vue.component(EditPopupModal.name, EditPopupModal)
|
||||
Vue.component(EditDownModal.name, EditDownModal)
|
||||
Vue.component(EditDownTextarea.name, EditDownTextarea)
|
||||
|
||||
// 创建一个简单的输入框渲染
|
||||
VXETable.renderer.add('MyInput', {
|
||||
// 激活时自动聚焦
|
||||
autofocus: '.my-cell',
|
||||
// 可编辑激活模板
|
||||
renderEdit (h, renderOpts, { row, column }) {
|
||||
return [
|
||||
<input class="my-cell" text="text" v-model={ row[column.property] } />
|
||||
<vxe-input class="my-cell" v-model={ row[column.property] } prefix-icon="fa fa-user" suffix-icon="fa fa-search" clearable></vxe-input>
|
||||
]
|
||||
},
|
||||
// 可编辑显示模板
|
||||
@@ -13,13 +26,45 @@ VXETable.renderer.add('MyInput', {
|
||||
return [
|
||||
<span>{ row[column.property] }</span>
|
||||
]
|
||||
// },
|
||||
// // 单元格导出函数
|
||||
// editCellExportMethod ({ row, column }) {
|
||||
// return `值为：${row[column.property]}`
|
||||
// },
|
||||
// // 表尾单元格导出函数
|
||||
// footerCellExportMethod ({ items, _columnIndex, column }) {
|
||||
// return `合计为：${items[_columnIndex]}`
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个下拉表格渲染
|
||||
VXETable.renderer.add('EditDownTable', {
|
||||
autofocus: '.vxe-input--inner',
|
||||
renderEdit (h, renderOpts, params) {
|
||||
return [
|
||||
<edit-down-table params={ params } renderOpts={ renderOpts }></edit-down-table>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个弹窗渲染
|
||||
VXETable.renderer.add('EditPopupModal', {
|
||||
autofocus: '.vxe-input--inner',
|
||||
renderEdit (h, renderOpts, params) {
|
||||
return [
|
||||
<edit-popup-modal params={ params }></edit-popup-modal>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个文本域渲染
|
||||
VXETable.renderer.add('EditDownTextarea', {
|
||||
autofocus: '.vxe-input--inner',
|
||||
renderEdit (h, renderOpts, params) {
|
||||
return [
|
||||
<edit-down-textarea params={ params }></edit-down-textarea>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// 创建一个复杂的组合渲染
|
||||
VXETable.renderer.add('EditDownModal', {
|
||||
autofocus: '.vxe-input--inner',
|
||||
renderEdit (h, renderOpts, params) {
|
||||
return [
|
||||
<edit-down-modal params={ params } renderOpts={ renderOpts }></edit-down-modal>
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user