vue3中使用ant表单合并

已于 2022-10-18 21:40:12 修改
阅读量205 收藏
点赞数
分类专栏： # js 项目遇到的问题 文章标签： js
于 2021-09-19 23:30:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LRQQHM/article/details/120386333
版权 
方法一
将对象中属性一致的存储为children
const arrTeaching = [
    {
        "sort": 0,
        "classDisplayName": "暗示法ppp",
        "courseName": "测试2239",
        "classCourseId": "216214089134186496",
        "eduCourseId": "186360853233221632",
        "courseArrangingClassId": "216214088656035840",
        "orgClassId": "191403001049776128",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "测试2239",
        "uniqueKey": "4b094ee1-ff1f-4fb8-947a-1f6dcc497ead"
    },
    {
        "sort": 1,
        "classDisplayName": "物理化学走班",
        "courseName": "物理",
        "classCourseId": "216123637957599232",
        "eduCourseId": "197618192263254016",
        "courseArrangingClassId": "215382954413654021",
        "orgClassId": "197618307019636736",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "物理",
        "uniqueKey": "16320430872970"
    },
    {
        "sort": 1,
        "classDisplayName": "物理化学走班",
        "courseName": "测试2240",
        "classCourseId": "216123637961793537",
        "eduCourseId": "186361181198434304",
        "courseArrangingClassId": "215382954413654021",
        "orgClassId": "197618307019636736",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "测试2240",
        "uniqueKey": "16320430872970"
    },
    {
        "sort": 1,
        "classDisplayName": "物理化学走班",
        "courseName": "测试2239",
        "classCourseId": "216145267240935424",
        "eduCourseId": "186360853233221632",
        "courseArrangingClassId": "215382954413654021",
        "orgClassId": "197618307019636736",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "测试2239",
        "uniqueKey": "16320482156940"
    },
    {
        "sort": 1,
        "classDisplayName": "物理化学走班",
        "courseName": "测试2238",
        "classCourseId": "216145267240935425",
        "eduCourseId": "186360882584961024",
        "courseArrangingClassId": "215382954413654021",
        "orgClassId": "197618307019636736",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "测试2238",
        "uniqueKey": "16320482156940"
    },
    {
        "sort": 1,
        "classDisplayName": "物理化学走班",
        "courseName": "测试2240",
        "classCourseId": "216145267240935426",
        "eduCourseId": "186361181198434304",
        "courseArrangingClassId": "215382954413654021",
        "orgClassId": "197618307019636736",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "测试2240",
        "uniqueKey": "16320482156940"
    },
    {
        "sort": 1,
        "classDisplayName": "物理化学走班",
        "courseName": "语文",
        "classCourseId": "216145267240935427",
        "eduCourseId": "188532761169059840",
        "courseArrangingClassId": "215382954413654021",
        "orgClassId": "197618307019636736",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "语文",
        "uniqueKey": "16320482156940"
    },
    {
        "sort": 2,
        "classDisplayName": "一年级kkk",
        "courseName": "信息技术",
        "classCourseId": "216144946821275648",
        "eduCourseId": "188532761185837063",
        "courseArrangingClassId": "216144946334736386",
        "orgClassId": "191403001062359040",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "信息技术",
        "uniqueKey": "bec6aff8-6019-425c-b7be-767a9c2e19a5"
    },
    {
        "sort": 3,
        "classDisplayName": "一年级llll",
        "courseName": "数学",
        "classCourseId": "216214089134186497",
        "eduCourseId": "188532761185837056",
        "courseArrangingClassId": "216214088656035841",
        "orgClassId": "191403001062359041",
        "courseNum": 0,
        "continuousCourseTime": 0,
        "singleDoubleType": 0,
        "lessonCategoryId": "0",
        "placeId": "0",
        "placeNameEn": "",
        "placeName": "",
        "courseShortName": "数学",
        "uniqueKey": "4d0718fe-7c3d-45a5-8262-130cd212035b"
    }
]

export const changeTeachingArr = (arrTeaching: any) => {
  console.log(arrTeaching, 'arrTeaching')
  // 将班级一致的存放在对象中
  const resObj: any = {}
  for (const item of arrTeaching) {
    if (resObj[item.orgClassId]) {
      resObj[item.orgClassId].push(item)
    } else {
      resObj[item.orgClassId] = [item]
    }
  }
  console.log(resObj, 'resObj>>>')
  //  数据的处理 为了将子集存放在child中
  const res = []
  for (const key in resObj) {
    if (resObj[key].length > 1) {
      const child: any = resObj[key].map((item: any) => ({
        ...item,
      }))
      res.push({
        at: key,
        child,
      })
    } else {
      res.push(resObj[key][0])
    }
  }
  console.log(res, 'res>>>')
  // 将child长度存放到第一个要合并的对象中 如果后端已经处理好了下面有children那么直接使用下面的方法即可
  let arr: any = []
  res.map((responseDataItem) => {
    if (responseDataItem.child) {
      const len = responseDataItem.child.length
      responseDataItem.child.map((timeDataItem: any, index: number) => {
        arr = [
          ...arr,
          {
            ...timeDataItem,
            span: index === 0 ? len : 0,
          },
        ]
        return arr
      })
    } else {
      arr.push({
        ...responseDataItem,
        span: 1,
      })
    }
    return arr
  })
  return arr
}
column = {
        title: '班级',
        width: 243,
        noRender: true,
        customRender: ({ text, record, index }: any) => {
          console.log(record.span)
          const obj = {
            children: (
              <div
                xb-title
                style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
              >
                {record.classDisplayName}
              </div>
            ),
            props: { rowSpan: record.span } as any,
          }
          return obj
        },
      },
      {
        title: '课程',
        dataIndex: 'courseName',
        width: 200,
      },
      {
        key: 'courseShortName',
        width: 100,
        slots: {
          customRender: 'courseShortName',
          title: 'courseShortNameTitle',
        },
      },
      {
        title: '周课时',
        key: 'courseNum',
        width: 120,
        slots: { customRender: 'courseNum' },
      },
      {
        // title: '连堂次数',
        key: 'continuousCourseTime',
        width: 120,
        slots: {
          customRender: 'continuousCourseTime',
          title: 'courseTimeTitle',
        },
      },
      {
        title: '单双周',
        key: 'singleDoubleType',
        width: 150,
        slots: { customRender: 'singleDoubleType' },
      },
      {
        key: 'lessonCategoryId',
        width: 160,
        slots: {
          customRender: 'lessonCategoryId',
          title: 'courseCategoryTitle',
        },
      },
      {
        key: 'placeId',
        width: 150,
        title: '场地',
        slots: {
          customRender: 'placeId',
          title: 'placeTitle',
        },
      },
      {
        title: '操作',
        width: 100,
        noRender: true,
        slots: { customRender: 'action' },
      },

方法2：给定一个标记，跟当前的index做对比

//表格头
  const teachingColumns: any = reactive({
    list: [],
  })
teachingColumns.list = assembleColumns()

const assembleColumns = () => {
    let aIndex = 0
    const columnsList = [
      {
        title: '班级',
        dataIndex: 'displayName',
        key: 'displayName',
        width: 240,
        noRender: true,
        customRender: ({ text, record, index }: any) => {
          const obj = {
            children: text,
            props: {} as any,
          }
          if (index == aIndex) {
            obj.props.rowSpan = record.courseNum > 0 ? record.courseNum : 1
            aIndex = (record.courseNum > 0 ? record.courseNum : 1) + aIndex
          } else {
            if (record.courseNum) {
              obj.props.rowSpan = 0
            } else {
              obj.props.rowSpan = 1
            }
          }
          obj.children = (
            <span class="table-td-clamp uniline" v-t-tooltip>
              {record.displayName}
            </span>
          )
          return obj
        },
      },
      {
        title: '课程',
        dataIndex: 'arrangeCourse',
        width: 240,
        noRender: true,
        customRender: ({ text, record, index }: any) => {
          const obj = {
            children: text,
            props: {} as any,
          }

          let singleDoubleName = ''
          if (
            record.arrangeCourse.singleDoubleType === ESingleDoubleType.Single
          ) {
            singleDoubleName = '单-'
          } else if (
            record.arrangeCourse.singleDoubleType === ESingleDoubleType.Double
          ) {
            singleDoubleName = '双-'
          }

          const courseName = record.arrangeCourse.shortName
            ? record.arrangeCourse.shortName
            : record.arrangeCourse.name

          const showName = `${singleDoubleName}${courseName}`

          if (record.arrangeCourse.name) {
            obj.children = (
              <div>
                <span class="table-td-clamp">{showName}</span>
              </div>
            )
          } else {
            obj.children = <span class="empty-td uniline" v-t-tooltip></span>
          }
          return obj
        },
      },
      {
        title: '任课老师',
        dataIndex: 'courseTeacher',
        width: 240,
        noRender: true,
        customRender: ({ text, record, index }: any) => {
          const obj = {
            children: text,
            props: {} as any,
          }

          const currentCourse = record.arrangeCourse

          if (currentCourse.name) {
            let teacherStr = currentCourse.teacherList
              .map((t) => {
                return t.name
              })
              .join(',')

            teacherStr = teacherStr !== '' ? teacherStr : '选择老师点击这里'

            obj.children = (
              <a
                onClick={() => {
                  editCourseTeacherByItem(currentCourse)
                }}
                class="table-td-clamp"
              >
                {/* {teacherStr} */}
                <span
                  v-t-tooltip
                  class={[
                    currentCourse.teacherList.length > 0
                      ? 'arranged'
                      : 'noArrange',
                    'uniline',
                  ]}
                >
                  {teacherStr}
                </span>
                <span
                  v-show={currentCourse.teacherList.length > 0}
                  onClick={(e) => {
                    e.stopPropagation()
                    clearSelectedTeacher(currentCourse)
                  }}
                  class="del-icon"
                >
                  <CloseSquareFilled style="font-size: 16px; color: #FF4D4F" />
                </span>
              </a>
            )
          } else {
            obj.children = <span class="empty-td uniline" v-t-tooltip></span>
          }
          return obj
        },
      },
    ]
    return columnsList
  }
 return {
 	teachingColumns
 }
KAGHQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd Form组件表单在vue3中的使用
Hiroshi's
04-11 6029
antd Form表单组件有个最需要注意的问题，官方文档里写的很清楚： 这是什么意思，我们下面说个例子就明白了： <template> <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-form-item ref="username" name="user
Antd Vue table合并列表格
qq_45970524的博客
01-17 872
前言：本来想着在网上随便搜个demo借鉴一下，但是找了好几个首页置顶的 发现效果都有点差强人意（好多都是因为相同的数据是相邻的所以才会合并 如果不相邻的话排版直接就废了） 先上效果！ 在网上找的如果这种中间如果穿插有不同的value的话 写的逻辑不生效了，然后开始上代码： html: <template> <a-table :columns="columns" :data-source="data" bordered > </a-table
ant-design-vue的from表单每行多个
qq_39273455的博客
05-04 2553
vue3-踩坑记录-＜el-form-item＞中包含多个内容并给其中一个增加非空校验。
Xxd_92799的博客
02-06 697
一个由vue3+js+element-plus，中包含多个内容并给其中一个增加非空校验。
vue多表单的合成设计与实现
潇蓝诺依的博客
06-03 1777
文章目录vue多表单的合成设计与实现基本功能情景1 vue多表单的合成设计与实现 不会起名字，先叫这个吧???? 项目中是否会遇到很多个表单（十几个，几十个那种），这时候如何实现。一个个去写么？肯定不是的。 基本功能 通过遍历表单项来实现 <el-form ref="form" :model="form" label-position="top" size="mini"> <template v-for="(item, index) in formModel.para
vue项目中使用ant design vue表格合并单元格
myjava_6的博客
06-18 700
vue项目中使用ant design vue表格合并单元格
用于在vxetable表格中适配antdesignvue组件的渲染
08-10
3. **组件适配与渲染**：在VxeTable中适配Ant Design Vue组件，主要是通过VxeTable的自定义渲染（render）函数来实现的。这通常涉及到`h`函数的使用，`h`是Vue的渲染函数，允许开发者创建Vue组件实例。通过`h...
LayUiTable表单相同参数的单元格合并
10-26
这种单元格合并的技巧不仅适用于LayUI Table，其他类似的前端组件库，如Element UI、Ant Design Vue等，也都有类似的方法实现单元格合并。 通过以上步骤，我们可以有效地在LayUI Table中实现相同参数的单元格合并...
my-project(1)_put6vw_AntDesign_vue_
10-01
【标题】"my-project(1)_put6vw_AntDesign_vue_" 暗示这是一个使用Ant Design Vue库构建的前端项目，可能是一个企业级的后台管理系统。Ant Design Vue是阿里巴巴开发的一个UI组件库，它提供了丰富的组件和统一的设计...
vue react git antd element-ui等图标
08-30
在前端开发领域，Vue、React、Git、Ant Design（简称antd）和Element UI是不可或缺的重要技术组件和框架。这些工具和服务极大地提升了开发效率，优化了用户体验，并推动了现代Web应用程序的发展。 1. Vue.js：Vue是...
vue.js 解决v-model让select默认选中不生效的问题
11-20
在Vue.js开发中，我们经常使用`v-model`指令来实现数据双向绑定，尤其是在处理表单元素如`select`下拉选项时。然而，当遇到`v-model`无法使`select`默认选中指定选项的问题时，开发者可能会感到困惑。这个问题通常...
ant-design-VUE form 表单提交 文件和表单数据
skybot的专栏
01-28 6863
由于项目里需要用到在一个表单里使用文件和内容一起提交到服务端，因此需要进行处理。 前端：Vue2.0 Ant-desing 后端：.net WebAPI 界面如下： 页面代码： <template> <div class="clearfix" style="background-color:#ffffff;"> <a-form :form="form"> <a-form-item label="资源名称" has-feed...
Vue3 — setup、reactive与ref细节
m0_48942526的博客
05-14 799
setup细节 setup执行的时机 在beforeCreate之前执行(一次), 此时组件对象还没有创建 this是undefined, 不能通过this来访问data/computed/methods / props 其实所有的composition API相关回调函数中也都不可以 <template> <h1>父组件-----</h1> <h3>{{ msg }}</h3> <button @click="m
ant vue table表格数据动态合并
qq_46258819的博客
10-13 5190
3.如果是一次性获取所有数据进行分页的话，计算columns的时候需要进行修改一下。1.在computed节点下动态计算每次要合并的行数。2.在methods节点下定义合并单元格的方法。
VUE中将多个对象合并成一个对象的方法
最新发布
TangBoBoa的博客
06-14 5361
方法或扩展运算符（Spread Operator）将三个对象合并成一个对象。将包含所有三个对象的属性。如果有重复的属性名，则后面的对象的属性将覆盖前面对象的属性。无论你选择哪种方法，都会将三个对象的属性合并到一个新的对象中，创建一个新的对象，将展开的属性放入其中，结果存储在。方法将它们合并到一个新的空对象中，结果存储在。）将三个对象的属性展开，然后使用花括号。在上面的示例中，我们使用扩展运算符（在上面的示例中，我们创建了三个对象。在Vue中，你可以使用。
vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】
XSL_HR的博客
12-30 6805
一个功能齐全的后台管理系统，离不开Form表单的使用，从本期文章开始会详细介绍如何在项目中使用form表单、完成数据的双向绑定、各种组件的嵌套，最后形成封装好了的form表单，可以实现复用。
Ant Design Pro最佳实践
博客
02-08 9744
Ant Design Pro 是一款适用于中后台的前端框架，基于React, dva.js, Ant Design。 关于路由的问题 在 src/common/router.js 中， 配置路径如下： /A /A/B /A/C 那么 2 和 3 是访问不到的，这里引用官方的解决方案 关于dva.js的使用 尽可能的将所有处理数据交互的操作都放在 src/models 中，方...
vue3 +前端实现单元格合并
zzzz121380的博客
03-17 1226
如果接口数据没有给相关合并属性，那么需要前端自行处理进行合并，需要自行添加rowSpan属性（实现上图样式）代码如下：(只把修改数据的方法展示出来，开发中根据实际需要的数据格式进行修改)如果后端接口返回的数据直接给定相关合并的属性，那么直接使用即可，不需要以下方法。
React 项目中使用AntDesign框架时处理同一个页面使用多个Form表单的问题
热门推荐
前端小小白的爬坑之路
04-01 2万+
React 项目中同一个页面使用多个Form表单，如果直接在Render中使用多个Forn，在提交某一个表单时会同时触发其他表单的提交事件，因此可以使用函数式的方法return出Form组件，然后再Render中引用，从而使页面上的Form相互独立 代码如下： import React, { Component } from 'react'; import { Form, Button,...
vue3中使用ant design vue表单
06-06
要在Vue3中使用Ant Design Vue表单，你需要先安装Ant Design Vue和Vue3中的Composition API。可以按照以下步骤进行操作： 1. 安装Ant Design Vue ``` npm install ant-design-vue --save ``` 2. 安装Vue3中的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值