JeecgBoot中的JEditableTable组件复杂自定义功能：修改其中一个字段时其他字段也同时做相应改变，级联选择器的使用

最新推荐文章于 2025-08-14 17:31:00 发布

斋藤肥鸟

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： JeecgBoot 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/Tinkerbaby/article/details/110481167

本文介绍了如何在JeecgBoot的JEditableTable组件中实现复杂自定义功能，当修改产品名称时，产品编码和规格字段自动级联改变。通过修改列类型，添加插槽，响应式方法以及利用jeecg提供的API，实现了级联选择器的使用，解决了在前端数据格式不变的情况下与后端数据的交互问题。同时，文中分享了遇到的问题和解决过程，提供了详细的步骤和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考官方技术文档：http://jeecg-boot.mydoc.io/?t=345687

初始需求：如下图，当我修改产品名称的选项时，产品编码和产品规格的字段会根据我给出的数组自动改变。
在这里插入图片描述
1.首先我们需要将column类型改为slot才能自定义产品名称的可选列表以及添加同时修改功能。需要注意的是在技术文档中我们可以看到，当 type=slot时所需的参数:

参数	类型	必填	说明
slotName	string	✔️	slot的名称

所以最终代码如下：

columns: [
          {
   
   
            title: '产品名称',
            key: 'materialName',
            type: FormTypes.slot,
            slotName: 'materialName',
            width: '20%',
          },
          {
   
   
            title: '产品编码',
            key: 'materialCode',
            type: FormTypes.slot,
            slotName: 'materialCode',
            width: '20%',
          },
          {
   
   
            title: '产品规格',
            key: 'materialSpecs',
            type: FormTypes.slot,
            slotName: 'materialSpecs',
            width: '60%',
          },

2.然后再html代码中添加对应的插槽:

<j-editable-table
  :ref="tableName"
  :loading="loading"
  :columns="columns"
  :dataSource="dataSource"
  :maxHeight="300"
  :rowNumber="true"
  :rowSelection="true"
  :actionButton="true"
>
  <template v-slot:materialName="props">
    <a-select
      :default-value="props.text"
      placeholder="请选择产品名称"
      style="width: 100%"
      show-search
      @change="(value) => handleProChange(value, props.rowId)"
    >
      <a-select-option