JeecgBoot页面级联选择框(三种方法)_jeecgboot联动组件

作者：小丑西瓜9 | 2024-06-09 01:41:33

踩

jeecgboot联动组件

JeecgBoot页面级联选择框(三种方法)

1、form表单级联选择框（已实践）
2、j-vxe-table联动示例（已实践）
3、j-editable-table三级联动（简单测试，只贴代码，不做过多说明）

一、form表单级联选择框

1.1、效果图

在这里插入图片描述

1.1、页面

<a-col :span="14">
   <a-form-model-item label="设备分类" 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
2
3
4
5
6
7
8
9
10
11
12
13
14

1.2、方法

data () {
      return {
        twoCategoryId:"",
        oneCategory: [],
        twoCategory: [],
        model: {

        },
      }
    },

methods: {
      //选择二级分类
      selectTwoCategory(value){
        this.model.twoCategoryId = value;
      },
      //选择一级分类,获取二级分类
      selectOneCategory(value){
        this.twoCategoryId = "";
        getAction(请求后台的方法,{请求参数名:请求参数值}).then((res) => {
          this.twoCategory = res.result;
        })
      },
      //初始化一级分类
      initOneCategory(){
        getAction(请求后台的方法,{}).then((res) => {
          this.oneCategory = res.result;
        })
      },
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

二、j-vxe-table联动示例

2.1、页面引入JVxeTable.js

import { JVXETypes } from '@/components/jeecg/JVxeTable'
1

2.2、j-vxe-table使用

<!--写在template标签中-->
<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,
        // 分页器参数
        pagination: {
          // 当前页码
          current: 1,
          // 每页的条数
          pageSize: 200,
          // 可切换的条数
          pageSizeOptions: ['10', '20', '30', '100', '200'],
          // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
          total: 0,
        },
        // 选择的行
        selectedRows: [],
        // 数据源
        dataSource: [],
        // 联动配置
        linkageConfig: [
          {requestData: this.loadFacCategory, key: 'oneCategoryId',},
        ],
        columns: [
          {
            title: '一级分类',
            key: 'oneCategoryId',
            type: JVXETypes.select,
            placeholer: '请选择${title}',
            //二级分类的联动字段
            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:{
         
        },
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

2.3、配置说明：①~~⑤

①handleTableSave： 【整体保存】点击保存按钮时触发的事件，如下：

handleTableSave({$table, target}) {
    // 校验整个表格
     $table.validate().then((errMap) => {
       // 校验通过
       if (!errMap) {
         // 获取所有数据
         let tableData = target.getTableData()
         console.log('当前保存的数据是：', tableData)
         // 获取新增的数据
         let newData = target.getNewData()
         console.log('-- 新增的数据：', newData)
         // 获取删除的数据
         let deleteData = target.getDeleteData()
         console.log('-- 删除的数据：', 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
         })
       }
     })
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

②handleTableRemove： 单元格删除事件，如下：

handleTableRemove(event) {
   console.log('待删除的数据: ', event.deleteRows)
   // 也可以只传ID，因为可以根据ID删除
   let deleteIds = event.deleteRows.map(row => row.id)
   console.log('待删除的数据ids: ', deleteIds)

   // 模拟请求后台删除
   this.loading = true
   putAction(this.url.后台删除接口方法,{ids : deleteIds}).then((res) => {

   })
 },
1
2
3
4
5
6
7
8
9
10
11
12

③handleEditClosed： 单元格编辑完成之后触发的事件(修改方法)，如下：

handleEditClosed(event) {
  let {$table, row, column} = event
   let field = column.property
   let cellValue = row[field]
   // 判断单元格值是否被修改
   if ($table.isUpdateByRow(row, field)) {
     // 校验当前行
     $table.validate(row).then((errMap) => {
       // 校验通过
       if (!errMap) {
         // 【模拟保存】
         let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
         console.log('即时保存数据：', row)
         row.cardId = this.cardId;
         putAction(this.url.后台更新接口, row).then(res => {
           if (res.success) {
             this.$message.success(`"${column.title}"保存成功！`)
             // 局部更新单元格为已保存状态
             $table.reloadRow(row, null, field)
           } else {
             this.$message.warn(`"${column.title}"保存失败：` + res.message)
           }
         }).finally(() => {
           hideLoading()
         })
       }
     })
   }
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

④handlePageChange： 当分页参数变化时触发的事件

   handlePageChange(event) {
     // 重新赋值
     this.pagination.current = event.current
     this.pagination.pageSize = event.pageSize
     // 查询数据
     this.loadData()
   },
   // 加载数据
   loadData() {
     // 封装查询条件
     let formData = {
       pageNo: this.pagination.current,
       pageSize: this.pagination.pageSize
     }
     // 调用查询数据接口
     this.loading = true
     getAction(this.url.后台查询列表方法接口, formData).then(res => {
       // console.log("后台返回的数据res"+JSON.stringify(res));
       if (res.success) {
         // 后台查询回来的 total，数据总数量
         this.pagination.total = res.result.total
         // 将查询的数据赋值给 dataSource
         this.dataSource = res.result.records
         // 重置选择
         this.selectedRows = []
       } else {
         this.$error({title: '主表查询失败', content: res.message})
       }
     }).finally(() => {
       // 这里是无论成功或失败都会执行的方法，在这里关闭loading
       this.loading = false
     })
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

⑤handleSelectRowChange： 当选择的行变化时触发的事件，如下：

handleSelectRowChange(event) {
   this.selectedRows = event.selectedRows
},
1
2
3

2.4、methods中联动方法

methods:{
	//获取分类数据
      async loadFacCategory(parent) {
        let res
        // 如果parent为空，则查询第一级菜单
        if (parent === '') {
          res = await getAction('后台一级分类请求方法')
        } else {
          res = await getAction('后台二级分类请求方法', {pid: parent})
        }
        if (res.success) {
          // 返回的数据里必须包含 value 和 text 字段
          return res.result.map(item => ({value: item.id, text: item.name}))
        }
        this.$message.warning('获取设备分类失败：' + res.message)
        return []
      },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三、j-editable-table三级联动

<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: '省/直辖市/自治区',
            key: 's1',
            type: FormTypes.select,
            width: '240px',
            options: [],
            placeholder: '请选择${title}'
          },
          {
            title: '市',
            key: 's2',
            type: FormTypes.select,
            width: '240px',
            options: [],
            placeholder: '请选择${title}'
          },
          {
            title: '县/区',
            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: '东城区', value: '110101', parent: '110100' },
          { label: '西城区', value: '110102', parent: '110100' },
          { label: '朝阳区', value: '110105', parent: '110100' },
          { label: '和平区', value: '120101', parent: '120000' },
          { label: '河东区', value: '120102', parent: '120000' },
          { label: '河西区', value: '120103', parent: '120000' },
          { label: '黄浦区', value: '310101', parent: '310100' },
          { label: '徐汇区', value: '310104', parent: '310100' },
          { label: '长宁区', value: '310105', parent: '310100' },
          { label: '长安区', value: '130102', parent: '130100' },
          { label: '桥西区', value: '130104', parent: '130100' },
          { label: '新华区', value: '130105', parent: '130100' },
          { label: '路南区', value: '130202', parent: '130200' },
          { label: '路北区', value: '130203', parent: '130200' },
          { label: '古冶区', value: '130204', parent: '130200' },
          { label: '海港区', value: '130302', parent: '130300' },
          { label: '山海关区', value: '130303', parent: '130300' },
          { label: '北戴河区', value: '130304', parent: '130300' },
        ]
      }
    },
    mounted() {
      // 初始化数据
      this.columns[0].options = this.request(null)
    },
    methods: {

      request(parentId) {
        return this.mockData.filter(i => i.parent === parentId)
      },

      /** 当选项被改变时，联动其他组件 */
      handleValueChange(event) {
        const { type, row, column, value, target } = event

        if (type === FormTypes.select) {

          // 第一列
          if (column.key === 's1') {
            // 设置第二列的 options
            this.columns[1].options = this.request(value)
            // 清空后两列的数据
            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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

一个在学习的开发者，勿喷，欢迎交流

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/692085