JeecgBoot頁面級聯(lián)選擇框的三種實現(xiàn)方式
更新時間：2026年01月20日 15:14:26 作者：bug0到1
文章介紹了三種實現(xiàn)級聯(lián)選擇框的方法,包括form表單級聯(lián)選擇框、j-vxe-table聯(lián)動示例和j-editable-table三級聯(lián)動,這些方法可以通過示例頁面和代碼進(jìn)行實踐和測試
1、form表單級聯(lián)選擇框（已實踐）
2、j-vxe-table聯(lián)動示例（已實踐）
3、j-editable-table三級聯(lián)動（簡單測試，只貼代碼，不做過多說明）
一、form表單級聯(lián)選擇框
1.1、效果圖
1.2、頁面
<a-col :span="14">
<a-form-model-item label="設(shè)備分類" prop="categoryId">
<a-select style="width:50%" placeholder="請選擇一級分類" v-model="model.oneCategoryId" @change="selectOneCategory">
<a-select-option v-for="item in oneCategory" :key="item.id" :value="item.id" :label="item.name">
{{item.name}}
</a-select-option>
</a-select>
<a-select style="width:50%" placeholder="請選擇二級分類" v-model="twoCategoryId" @change="selectTwoCategory">
<a-select-option v-for="item in twoCategory" :key="item.id" :value="item.id" :label="item.name">
{{item.name}}
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
1.3、方法
data () {
return {
twoCategoryId:"",
oneCategory: [],
twoCategory: [],
model: {
},
}
},
methods: {
//選擇二級分類
selectTwoCategory(value){
this.model.twoCategoryId = value;
},
//選擇一級分類,獲取二級分類
selectOneCategory(value){
this.twoCategoryId = "";
getAction(請求后臺的方法,{請求參數(shù)名:請求參數(shù)值}).then((res) => {
this.twoCategory = res.result;
})
},
//初始化一級分類
initOneCategory(){
getAction(請求后臺的方法,{}).then((res) => {
this.oneCategory = res.result;
})
},
}
二、j-vxe-table聯(lián)動示例
2.1、頁面引入JVxeTable.js
import { JVXETypes } from '@/components/jeecg/JVxeTable'
2.2、j-vxe-table使用
<!--寫在template標(biāo)簽中-->
<j-vxe-table
ref="vTable"
toolbar
:toolbarConfig="toolbarConfig"
row-number
row-selection
keep-source
async-remove
:height="340"
:loading="loading"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:linkage-config="linkageConfig"
@save="handleTableSave"
@remove="handleTableRemove"
@edit-closed="handleEditClosed"
@pageChange="handlePageChange"
@selectRowChange="handleSelectRowChange">
<!--寫在export default中-->
data () {
return{
// 工具欄的按鈕配置
toolbarConfig: {
add 新增按鈕；remove 刪除按鈕；clearSelection 清空選擇按鈕
btn: ['add', 'save', 'remove', 'clearSelection']
},
// 是否正在加載
loading: false,
// 分頁器參數(shù)
pagination: {
// 當(dāng)前頁碼
current: 1,
// 每頁的條數(shù)
pageSize: 200,
// 可切換的條數(shù)
pageSizeOptions: ['10', '20', '30', '100', '200'],
// 數(shù)據(jù)總數(shù)（目前并不知道真實的總數(shù)，所以先填寫0，在后臺查出來后再賦值）
total: 0,
},
// 選擇的行
selectedRows: [],
// 數(shù)據(jù)源
dataSource: [],
// 聯(lián)動配置
linkageConfig: [
{requestData: this.loadFacCategory, key: 'oneCategoryId',},
],
columns: [
{
title: '一級分類',
key: 'oneCategoryId',
type: JVXETypes.select,
placeholer: '請選擇${title}',
//二級分類的聯(lián)動字段
linkageKey: 'twoCategoryId',
},
{
title: '二級分類',
key: 'twoCategoryId',
type: JVXETypes.select,
placeholer: '請選擇${title}',
},
{
title: '操作',
key: 'action',
type: JVXETypes.slot,
fixed: 'right',
minWidth: '100px',
align: 'center',
slotName: 'action',
}
],
url:{
},
}
},
2.3、配置說明：①~~⑤
①handleTableSave： 【整體保存】點擊保存按鈕時觸發(fā)的事件，如下：
handleTableSave({$table, target}) {
// 校驗整個表格
$table.validate().then((errMap) => {
// 校驗通過
if (!errMap) {
// 獲取所有數(shù)據(jù)
let tableData = target.getTableData()
console.log('當(dāng)前保存的數(shù)據(jù)是：', tableData)
// 獲取新增的數(shù)據(jù)
let newData = target.getNewData()
console.log('-- 新增的數(shù)據(jù)：', newData)
// 獲取刪除的數(shù)據(jù)
let deleteData = target.getDeleteData()
console.log('-- 刪除的數(shù)據(jù)：', deleteData)
//recordType=0
for(var i = 0;i<newData.length;i++){
newData[i].recordType = "0"
}
// 請求后臺保存
this.loading = true
postAction(this.url.后臺請求接口, newData).then(res => {
if (res.success) {
this.$message.success(`保存成功！`)
} else {
this.$message.warn(`保存失?。篳 + res.message)
}
}).finally(() => {
this.loading = false
})
}
})
},
②handleTableRemove： 單元格刪除事件，如下：
handleTableRemove(event) {
console.log('待刪除的數(shù)據(jù): ', event.deleteRows)
// 也可以只傳ID，因為可以根據(jù)ID刪除
let deleteIds = event.deleteRows.map(row => row.id)
console.log('待刪除的數(shù)據(jù)ids: ', deleteIds)
// 模擬請求后臺刪除
this.loading = true
putAction(this.url.后臺刪除接口方法,{ids : deleteIds}).then((res) => {
})
},
③handleEditClosed： 單元格編輯完成之后觸發(fā)的事件(修改方法)，如下：
handleEditClosed(event) {
let {$table, row, column} = event
let field = column.property
let cellValue = row[field]
// 判斷單元格值是否被修改
if ($table.isUpdateByRow(row, field)) {
// 校驗當(dāng)前行
$table.validate(row).then((errMap) => {
// 校驗通過
if (!errMap) {
// 【模擬保存】
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
console.log('即時保存數(shù)據(jù)：', row)
row.cardId = this.cardId;
putAction(this.url.后臺更新接口, row).then(res => {
if (res.success) {
this.$message.success(`"${column.title}"保存成功！`)
// 局部更新單元格為已保存狀態(tài)
$table.reloadRow(row, null, field)
} else {
this.$message.warn(`"${column.title}"保存失?。篳 + res.message)
}
}).finally(() => {
hideLoading()
})
}
})
}
},
④handlePageChange： 當(dāng)分頁參數(shù)變化時觸發(fā)的事件
handlePageChange(event) {
// 重新賦值
this.pagination.current = event.current
this.pagination.pageSize = event.pageSize
// 查詢數(shù)據(jù)
this.loadData()
},
// 加載數(shù)據(jù)
loadData() {
// 封裝查詢條件
let formData = {
pageNo: this.pagination.current,
pageSize: this.pagination.pageSize
}
// 調(diào)用查詢數(shù)據(jù)接口
this.loading = true
getAction(this.url.后臺查詢列表方法接口, formData).then(res => {
// console.log("后臺返回的數(shù)據(jù)res"+JSON.stringify(res));
if (res.success) {
// 后臺查詢回來的 total，數(shù)據(jù)總數(shù)量
this.pagination.total = res.result.total
// 將查詢的數(shù)據(jù)賦值給 dataSource
this.dataSource = res.result.records
// 重置選擇
this.selectedRows = []
} else {
this.$error({title: '主表查詢失敗', content: res.message})
}
}).finally(() => {
// 這里是無論成功或失敗都會執(zhí)行的方法，在這里關(guān)閉loading
this.loading = false
})
},
⑤handleSelectRowChange： 當(dāng)選擇的行變化時觸發(fā)的事件，如下：
handleSelectRowChange(event) {
this.selectedRows = event.selectedRows
},
2.4、methods中聯(lián)動方法
methods:{
//獲取分類數(shù)據(jù)
async loadFacCategory(parent) {
let res
// 如果parent為空，則查詢第一級菜單
if (parent === '') {
res = await getAction('后臺一級分類請求方法')
} else {
res = await getAction('后臺二級分類請求方法', {pid: parent})
}
if (res.success) {
// 返回的數(shù)據(jù)里必須包含 value 和 text 字段
return res.result.map(item => ({value: item.id, text: item.name}))
}
this.$message.warning('獲取設(shè)備分類失敗：' + res.message)
return []
},
}
三、j-editable-table三級聯(lián)動
<template>
<j-editable-table
:columns="columns"
:dataSource="dataSource"
:rowNumber="true"
:actionButton="true"
:rowSelection="true"
:maxHeight="400"
@valueChange="handleValueChange"
/>
</template>
<script>
import { FormTypes } from '@/utils/JEditableTableUtil'
import JEditableTable from '@/components/jeecg/JEditableTable'
export default {
name: 'ThreeLinkage',
components: { JEditableTable },
data() {
return {
columns: [
{
title: '省/直轄市/自治區(qū)',
key: 's1',
type: FormTypes.select,
width: '240px',
options: [],
placeholder: '請選擇${title}'
},
{
title: '市',
key: 's2',
type: FormTypes.select,
width: '240px',
options: [],
placeholder: '請選擇${title}'
},
{
title: '縣/區(qū)',
key: 's3',
type: FormTypes.select,
width: '240px',
options: [],
placeholder: '請選擇${title}'
}
],
dataSource: [],
mockData: [
{ label: '北京市', value: '110000', parent: null },
{ label: '天津市', value: '120000', parent: null },
{ label: '河北省', value: '130000', parent: null },
{ label: '上海市', value: '310000', parent: null },
{ label: '北京市', value: '110100', parent: '110000' },
{ label: '天津市市', value: '120100', parent: '120000' },
{ label: '石家莊市', value: '130100', parent: '130000' },
{ label: '唐山市', value: '130200', parent: '130000' },
{ label: '秦皇島市', value: '130300', parent: '130000' },
{ label: '上海市', value: '310100', parent: '310000' },
{ label: '東城區(qū)', value: '110101', parent: '110100' },
{ label: '西城區(qū)', value: '110102', parent: '110100' },
{ label: '朝陽區(qū)', value: '110105', parent: '110100' },
{ label: '和平區(qū)', value: '120101', parent: '120000' },
{ label: '河?xùn)|區(qū)', value: '120102', parent: '120000' },
{ label: '河西區(qū)', value: '120103', parent: '120000' },
{ label: '黃浦區(qū)', value: '310101', parent: '310100' },
{ label: '徐匯區(qū)', value: '310104', parent: '310100' },
{ label: '長寧區(qū)', value: '310105', parent: '310100' },
{ label: '長安區(qū)', value: '130102', parent: '130100' },
{ label: '橋西區(qū)', value: '130104', parent: '130100' },
{ label: '新華區(qū)', value: '130105', parent: '130100' },
{ label: '路南區(qū)', value: '130202', parent: '130200' },
{ label: '路北區(qū)', value: '130203', parent: '130200' },
{ label: '古冶區(qū)', value: '130204', parent: '130200' },
{ label: '海港區(qū)', value: '130302', parent: '130300' },
{ label: '山海關(guān)區(qū)', value: '130303', parent: '130300' },
{ label: '北戴河區(qū)', value: '130304', parent: '130300' },
]
}
},
mounted() {
// 初始化數(shù)據(jù)
this.columns[0].options = this.request(null)
},
methods: {
request(parentId) {
return this.mockData.filter(i => i.parent === parentId)
},
/** 當(dāng)選項被改變時，聯(lián)動其他組件 */
handleValueChange(event) {
const { type, row, column, value, target } = event
if (type === FormTypes.select) {
// 第一列
if (column.key === 's1') {
// 設(shè)置第二列的 options
this.columns[1].options = this.request(value)
// 清空后兩列的數(shù)據(jù)
target.setValues([{
rowKey: row.id,
values: { s2: '', s3: '' }
}])
this.columns[2].options = []
} else
// 第二列
if (column.key === 's2') {
this.columns[2].options = this.request(value)
target.setValues([{
rowKey: row.id,
values: { s3: '' }
}])
}
}
}
}
}
</script>
<style scoped>
</style>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
SpringBoot開發(fā)實戰(zhàn)系列之定時器
定時任務(wù)我想諸位童鞋都不陌生,簡而言之名為“設(shè)定定時鬧鐘做某件事情”,下面這篇文章主要給大家介紹了關(guān)于SpringBoot定時器的相關(guān)資料,需要的朋友可以參考下2021-08-08
當(dāng)我們在編寫Java應(yīng)用的時候，很少會注意Java程序是如何被運行的，如何被操作系統(tǒng)管理和調(diào)度的，帶著好奇心，探索一下Java虛擬機(jī)啟動過程2022-05-05
下面小編就為大家分享一篇java操作solr實現(xiàn)查詢功能的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Java synchronize線程安全測試,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04
Java+MySQL實現(xiàn)學(xué)生信息管理系統(tǒng)源碼
這篇文章主要為大家詳細(xì)介紹了Java+MySQL實現(xiàn)學(xué)生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
java isPalindrome方法在密碼驗證中的應(yīng)用
這篇文章主要為大家介紹了java isPalindrome方法在密碼驗證中的簡單應(yīng)用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
IOC-Inversion of Control，即控制反轉(zhuǎn)。它不是什么技術(shù)，而是一種設(shè)計思想。這篇文章將為大家介紹一下Spring控制反轉(zhuǎn)IOC的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-10-10
關(guān)于@CacheEvict無法解決分頁緩存清除的解決思路
這篇文章主要介紹了關(guān)于@CacheEvict無法解決分頁緩存清除的解決思路，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
這篇文章主要介紹了tk.mybatis擴(kuò)展通用接口使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Mybatis 中 Oracle 的拼接模糊查詢及用法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08