小程序:通讯录列表的实现

2023年12月14日发(作者：幼儿园安全管理制度)

-

小程序：通讯录列表的实现

1.效果展示

2.源代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

3.我的理解

第一，在vue文件里面，首先我不知道怎么弄两次循环获取数据以及前端是怎么设置部门及人员的排序方式，后来才知道这个是后端设置好

了部门排序以及人员排序，前端需要做的就是将数据v-for循环遍历两遍展示数据。

接着把接口调通，把里面的{{ (-2) }}换成后台返回的各个数据，就可以显示出来了。1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

{{ me }}

class="list"

v-for="(items, idx) in e"

:key="idx"

@click="onclick(items)"

>

{{ (-2) }}

{{ me }}

{{ }}

第二，搜索关键词怎么做？

这一般有两种方式，一种是接口直接调用，后台已经配置好是哪个关键字，直接用就行；还有一种就是前端自己设置，这次用的关键字是根

据名字来进行搜索的，用的是模糊查询。

1

2

3

4

5

6

1

2

3

4

5

6

input

title="通讯录"

@onInputChange="onChange"

:back="type == 1 ? fal : true"

>

//

后台返回的数据

res: {},

//

电话列表

phoneList: [], //

从后台直接获取的所有数据

returnData: [], //

搜索后得到的数据

list: [],

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//

搜索功能

onChange(value) {

if (value == "") {

ist = Data;

} el {

let temp;

ist = [];

for (let i = 0, length = ; i < length; i++) {

temp = Data[i].((array) =>

(value)

);

if () {

({

deptName: Data[i].deptName,

employe: temp,

});

}

}

}

},

这段代码的filter 和 match

还有vue的filter()方法很少用，要强化vue，还有它的生命周期。

-