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

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

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

一、form表单级联选择框

1.1、效果图

1.1、页面

   
      
        
          {{item.name}}
        
      
      
        
          {{item.name}}
        
      
   

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

二、j-vxe-table联动示例

2.1、页面引入JVxeTable.js

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

2.2、j-vxe-table使用

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 {
           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三级联动

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