Rumah > hujung hadapan web > tutorial js > vue组件做出无限层级多选效果

vue组件做出无限层级多选效果

php中世界最好的语言
Lepaskan: 2018-05-25 14:07:14
asal
1533 orang telah melayarinya

这次给大家带来vue组件做出无限层级多选效果,vue组件做出无限层级多选效果的注意事项有哪些,下面就是实战案例,一起来看一下。

原理:每一个多选框都是一个节点,每个节点就是一个wTree组件,有父级(顶级level为0),有子级(底层list[]是空的),组件之间状态传递是通过组件通信传递,对于外部数据checkList数组的修改是通过store实现的。初始化从底层状态传递到上层,一层一层传递。改变状态,不同状态改变,修改checklist数组。大概就这个思路,下面是代码: 

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

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

<template> 

 <p> 

 <p > 

 <span v-for="o in levelNum"> </span> 

 <i v-if="item.list" :class="open ? openClass : closeClass" @click="showSub" style="color: #00d6b2"></i> 

 <span v-else> </span> 

 <span> 

 <a @click="changeState"

  <img src="./../assets/selectedAll.png" v-if="selectedState === &#39;all&#39;" width="15px" height="15px"/> 

  <img src="./../assets/selectedSub.png" v-if="selectedState === &#39;sub&#39;" width="15px" height="15px"/> 

  <img src="./../assets/selectedNull.png" v-if="selectedState === &#39;null&#39;" width="15px" height="15px"/> 

 </a> 

 </span> 

 <span>{{item.name}}</span> 

 </p> 

 <component v-show="open" :is="node" :item="o" :state="stateSub" v-for="o of item.list" :key="o.key" :level="levelNum" v-on:changeToPar="changeBySub"

 </component> 

 </p> 

</template> 

<script> 

 export default 

 name: 'wTree'

 props: ['item''level''state'], 

 data () { 

 return 

 open: true, 

 node: 'wTree'// 控制菜单开关的 

 selected: false, // 选中的情况下 

 selectedState: 'null'// 子组件被选中的情况下向上传递all/sub/null 

 originInfo: 'create'// 组件信息源,create/parent/children/this 

 openClass: 'el-icon-caret-bottom'

 closeClass: 'el-icon-caret-right'

 selectClass: 'el-icon-check'

 selectBg: '#1c8de0'

 list: [], 

 createSwitch: true 

 

 }, 

 computed: { 

 levelNum () { 

 return (this.level + 1) 

 }, 

 stateSub () { 

 return 

  selected: this.selected, 

  originInfo: this.originInfo 

 

 

 }, 

 methods: { 

 showSub () { 

 this.open = !this.open 

 }, 

 changeState () { 

 if (this.selected) { 

  this.selected = false 

  this.selectedState = 'null' 

  this.originInfo = 'this' 

  for (let o of this.list) { 

  o.selectedState = 'null' 

  

 else 

  this.selected = true 

  this.selectedState = 'all' 

  this.originInfo = 'this' 

  for (let o of this.list) { 

  o.selectedState = 'all' 

  

 

 let data = { 

  id: this.item.menuId, 

  selectedState: this.selectedState, 

  originInfo: 'parent' 

 

 this.$emit('changeToPar', data) 

 }, 

 changeBySub (data) { 

 // 如果是父组件true,判断状态,未被选中,添加id到list,selectSub=true,通知父组件,添加store的数组中,选中通知父组件,this.list.length=this.length状态改为selected 

 // 修改自身状态,添加list 

 let temp = data 

 if (data.originInfo === 'create') { 

  this.list.push(data) 

 else 

  this.originInfo = 'parent' 

  let stateNull = 'null' 

  let stateAll = 'all' 

  let stateSub = 'sub' 

  for (let o of this.list) { 

  if (o.id === temp.id) { 

  o.selectedState = temp.selectedState 

  

  

  if (o.selectedState !== 'all') { 

  stateAll = null 

  

  if (o.selectedState !== 'null') { 

  stateNull = null 

  

  

  if (stateNull) { 

  this.selectedState = stateNull 

  this.selected = false 

  else if (stateAll) { 

  this.selectedState = stateAll 

  this.selected = true 

  else 

  this.selectedState = stateSub 

  this.selected = true 

  

  let data = { 

  id: this.item.menuId, 

  selectedState: this.selectedState, 

  originInfo: 'parent' 

  

  this.$emit('changeToPar', data) 

 

 

 }, 

 watch: { 

 selected () { 

 // 初始化 

 if (this.originInfo === 'create') { 

  // 不改变值 

 else 

  // 改变值******** 

  if (this.selected) { 

  // 添加值 

  this.$store.commit('PUSH_CHECK_LIST', this.item.menuId) 

  else 

  // 删除值 

  this.$store.commit('SPLICE_CHECK_LIST', this.item.menuId) 

  

 

 }, 

 state () { 

 // 子组件得到通知,如果状态一直,不去改变,如果状态不一致改变 

 if (this.state.originInfo === 'this') { 

  this.originInfo = 'this' 

 

 if (this.originInfo === 'create') { 

  this.originInfo = 'children' 

 else 

  if (this.state.originInfo !== 'parent') { 

  if (this.state.selected) { 

  this.selected = true 

  this.selectedState = 'all' 

  if (this.list !== []) { 

  for (let o of this.list) { 

   o.selectedState = 'all' 

  

  

  else 

  this.selected = false 

  this.selectedState = 'null' 

  if (this.list !== []) { 

  for (let o of this.list) { 

   o.selectedState = 'null' 

  

  

  

  

 

 }, 

 list () { 

 // 初始化数组 

 if (this.list.length === this.item.list.length) { 

  let stateNull = 'null' 

  let stateAll = 'all' 

  let stateSub = 'sub' 

  for (let o of this.list) { 

  if (o.selectedState !== 'all') { 

  stateAll = null 

  

  if (o.selectedState !== 'null') { 

  stateNull = null 

  

  

  if (stateNull) { 

  this.selectedState = stateNull 

  this.selected = false 

  else if (stateAll) { 

  this.selectedState = stateAll 

  this.selected = true 

  else 

  this.selectedState = stateSub 

  this.selected = true 

  

  let data = { 

  id: this.item.menuId, 

  selectedState: this.selectedState, 

  originInfo: 'create' 

  

  this.$emit('changeToPar', data) 

 

 

 }, 

 created () { 

 // 初始化,把每个组件,从最底层添加到节点列表中,这样每个子组件都在list中了,就是originInfo=create的情况下添加数组,就不用判断数组长度,直接改变状态 

 if (this.createSwitch) { 

 let i = this.$store.state.checkList.indexOf(this.item.menuId) 

 console.log(!this.item.list) 

 console.log('-----------------------初始化'

 if (!this.item.list) { 

  if (i > -1) { 

  this.selectedState = 'all' 

  this.selected = true 

  else 

  this.selectedState = 'null' 

  this.selected = false 

  

  

  let data = { 

  id: this.item.menuId, 

  selectedState: this.selectedState, 

  originInfo: 'create' 

  

  this.$emit('changeToPar', data) 

  this.originInfo = 'this' 

 

 this.createSwitch = false 

 

 console.log(this.state) 

 console.log('----------------created'

 }, 

 updated () { 

 console.log('-------updated======='

 let i = this.$store.state.checkList.indexOf(this.item.menuId) 

 console.log(!this.item.list) 

 console.log('-----------------------初始化'

 if (!this.item.list) { 

 if (i > -1) { 

  this.selectedState = 'all' 

  this.selected = true 

 else 

  this.selectedState = 'null' 

  this.selected = false 

 

  

 let data = { 

  id: this.item.menuId, 

  selectedState: this.selectedState, 

  originInfo: 'parent' 

 

 this.$emit('changeToPar', data) 

 this.originInfo = 'this' 

 

 }, 

 mounted () { 

 console.log('=========mounted-----'

 

 

</script>

Salin selepas log masuk

调用 orgList带有层级的json数组

<w-tree v-for="o of orgList" :item="o" :level="0" :key="o.key"></w-tree> 

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

antd下拉框联动使用步骤详解

如何使用JS实现合并多个数组去重算

Atas ialah kandungan terperinci vue组件做出无限层级多选效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan