Young Kbt blog Young Kbt blog
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)

Shp Liu

朝圣的使徒,正在走向编程的至高殿堂!
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)
  • tbeam

    • Tbeam - 项目介绍
    • Tbeam - Ant Design Vue 3.x 表格
    • Tbeam - Ant Design Vue 3.x 新增
    • Tbeam - 技巧
      • 技巧1
      • 技巧2
  • 报修系统

  • yonyou

  • 项目工程
  • tbeam
Young Kbt
2021-11-07
目录

Tbeam - 技巧项目

# 技巧1

把一个数组对象的部分属性给另一个空数组对象的部分属性,该空数组对象自带创建这些部分属性,如 state.sourceList 内容:

state.sourceList = [
	{
		sourceId: '1111',
        sourceName: '可乐',
        sourceTime: '2021-11-07'
	},
    {
		sourceId: '2222',
        sourceName: '冰糖',
        sourceTime: '2021-11-06'
	},
    {
		sourceId: '3333',
        sourceName: '雪梨',
        sourceTime: '2021-11-05'
	},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

空数组 state.sourceNameList value 和 label 的获得 sourceName 的值

state.sourceNameList = [
	{
		label: `可乐`,
        value: `可乐`
	},
    {
		label: `冰糖`,
        value: `冰糖`
	},
    {
		label: `雪梨`,
        value: `雪梨`
	},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

将该数组对象的 sourceName 给一个空对象数组的 value 和 label 属性,代码如下:

// 把value绑定到select需要的key
state.sourceList.map((item) => {
    state.sourceNameList.push(
        Object.assign(
            {},
            {},
            { value: item.sourceName, label: item.sourceName }
        )
    );	
});
1
2
3
4
5
6
7
8
9
10

state.sourceList 指:state 对象的 sourceList 属性

state.sourceNameList 指:state 对象的 sourceNameList 属性

const state = {
    sourceList: [...],
    sourceNameList: []
}
1
2
3
4

# 技巧2

去掉数组集合的重复部分,只获取不重复部分,如 state.sourceNameList 内容为:

state.sourceNameList = [
	{
		label: '1111',
        value: '可乐'
	},
    {
		label: '1111',
        value: '可乐'
	},
    {
		label: '2222',
        value: '冰糖'
	},
    {
		label: '2222',
        value: '冰糖'
	},
    {
		label: '3333',
        value: '雪梨'
	},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

去掉上方重复的部分,获取不重复的部分给 state.sourceNameList:

state.sourceNameList = [
	{
		label: '1111',
        value: '可乐'
	},
    {
		label: '2222',
        value: '冰糖'
	},
    {
		label: '3333',
        value: '雪梨'
	},
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

去重代码为:

// 去重
let hash = [];
state.sourceNameList = state.sourceNameList.reduce((item, next) => {
    hash[next.label] ? "" : (hash[next.label] = true && item.push(next));
    return item;
}, []);
1
2
3
4
5
6

state.sourceNameList 指:state 对象的sourceNameList 属性

const state = {
    sourceNameList: []
}
1
2
3

hash 自定义名,next.label 的 label 取决于要去重的属性

编辑此页 (opens new window)
#Vue3UI
更新时间: 2024/11/02, 18:07:00
Tbeam - Ant Design Vue 3.x 新增
报修系统 - 详解

← Tbeam - Ant Design Vue 3.x 新增 报修系统 - 详解→

最近更新
01
技术随笔 - Element Plus 修改包名 原创
11-02
02
Reactor - 扩展性
11-02
03
Reactor - 最佳实践
11-02
更多文章>
Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
桂ICP备2021009994号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式