小程序:通訊錄列表的實現

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，還有它的生命周期。

-