JeecgBoot页面级联选择框的三种实现方式_Java

1、form表单级联选择框（已实践）

2、j-vxe-table联动示例（已实践）

3、j-editable-table三级联动（简单测试，只贴代码，不做过多说明）

一、form表单级联选择框

1.1、效果图

1.2、页面

<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.3、方法

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;
        })
      },
    }

二、j-vxe-table联动示例

2.1、页面引入jvxetable.js

import { jvxetypes } from '@/components/jeecg/jvxetable'

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:{
         
        },
      }
    },

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
         })
       }
     })
   },

②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) => {

   })
 },

③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()
         })
       }
     })
   }
 },

④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
     })
   },

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

handleselectrowchange(event) {
   this.selectedrows = event.selectedrows
},

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 []
      },
}

三、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>