首页 > web前端 > js教程 > 实例详解vue2.0在table中实现全选和反选

实例详解vue2.0在table中实现全选和反选

小云云
发布: 2017-12-28 10:01:13
原创
2654 人浏览过

本文主要介绍了vue2.0在table中实现全选和反选的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

demo的  git 地址:ShoppingCart

页面效果:

具体怎么实现的呢?

使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动:

App.vue文件


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

<template>

 <p id="app">

  <router-view/>

 </p>

</template>

<script>

export default {

 name: &#39;app&#39;

}

 

</script>

<style>

#app {

 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 color: #2c3e50;

}

 

li,

dl,

dt,

dd,

h1,

h2,

h3,

h4,

h5,

h6,

hgroup,

p,

blockquote,

figure,

form,

fieldset,

input,

legend,

pre,

abbr,

button {

 margin: 0;

 padding: 0;

}

 

ul,

ol {

 list-style: none;

 margin: 0;

 padding: 0;

}

 

*,

*::before,

*::after {

 box-sizing: border-box;

}

 

p,

p,

dl,

dt,

dd {

 margin: 0;

 padding: 0;

}

 

a {

 color: inherit;

 text-decoration: none;

}

 

.checkout-title {

 position: relative;

 margin-bottom: 41px;

 text-align: center;

}

 

.checkout-title::before {

 position: absolute;

 top: 50%;

 left: 0;

 content: "";

 width: 100%;

 height: 1px;

 background: #ccc;

 z-index: 0;

}

 

.checkout-title span {

 position: relative;

 padding: 0 1em;

 background-color: #fff;

 font-family: "moderat", sans-serif;

 font-weight: bold;

 font-size: 20px;

 color: #605F5F;

 z-index: 1;

}

</style>

登录后复制

home.vue文件


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

<template>

 <p class="container">

  <p class="checkout-title">

   <span>购物车</span>

  </p>

  <table class="product_table">

   <tbody>

    <template v-for="(list,index) in table_list">

     <tr>

      <td width="7%" min-width="94px" v-if="index===0">

       <input type="checkbox" v-model=&#39;checked&#39; v-on:click=&#39;checkedAll&#39;></td>

      <td width="7%" v-if="index!==0">

       <input type="checkbox" v-model=&#39;checkList&#39; :value="list.id">

      </td>

      <td width="43%">{{list.product_inf}}</td>

      <td width="10%" v-if="index===0">{{list.product_price}}</td>

      <td width="10%" v-if="index!==0">¥{{list.product_price}}</td>

      <td width="10%">{{list.product_quantity}}</td>

      <td width="10%">{{list.total_amount}}</td>

      <td width="20%" v-if="index===0">编辑</td>

      <td width="20%" v-if="index!==0">

       <a href="#" rel="external nofollow" rel="external nofollow" class="update">修改</a>

       <a href="#" rel="external nofollow" rel="external nofollow" class="delete">删除</a>

      </td>

     </tr>

    </template>

   </tbody>

  </table>

  <p class="price_total_bottom">

   <p class="price_total_ms">

    <label>合计:{{allProductTotal}}</label>

    <router-link to="/userAddress">结账</router-link>

   </p>

  </p>

 </p>

</template>

<script>

import userAddress from &#39;./address&#39;

export default {

 components: {

  userAddress

 },

 data() {

  return {

   table_list: [{

    &#39;id&#39;: 0,

    &#39;product_inf&#39;: &#39;商品信息&#39;,

    &#39;product_price&#39;: &#39;商品金额&#39;,

    &#39;product_quantity&#39;: &#39;商品数量&#39;,

    &#39;total_amount&#39;: &#39;总金额&#39;

   }, {

    &#39;id&#39;: &#39;1&#39;,

    &#39;product_inf&#39;: &#39;女士银手链&#39;,

    &#39;product_price&#39;: 120,

    &#39;product_quantity&#39;: 200,

    &#39;total_amount&#39;: 24000

   }, {

    &#39;id&#39;: &#39;2&#39;,

    &#39;product_inf&#39;: &#39;女士银手镯&#39;,

    &#39;product_price&#39;: 380,

    &#39;product_quantity&#39;: 200,

    &#39;total_amount&#39;: 72000

   }, {

    &#39;id&#39;: &#39;3&#39;,

    &#39;product_inf&#39;: &#39;女士银耳环&#39;,

    &#39;product_price&#39;: 100,

    &#39;product_quantity&#39;: 200,

    &#39;total_amount&#39;: 20000

   }],

   checked: false,

   allProductTotal: null,

   checkList: [&#39;1&#39;, &#39;3&#39;]

  }

 },

 methods: {

  checkedAll: function() {

   var _this = this;

   console.log(_this.checkList);

   if (_this.checked) { //实现反选

    _this.checkList = [];

   } else { //实现全选

    _this.checkList = [];

    _this.table_list.forEach(function(item, index) {

     if (index > 0) {

      _this.checkList.push(item.id);

     }

    });

   }

  }

 },

 watch: { //深度 watcher

  &#39;checkList&#39;: {

   handler: function(val, oldVal) {

    if (val.length === this.table_list.length - 1) {

     this.checked = true;

    } else {

     this.checked = false;

    }

   },

   deep: true

  }

 }

}

 

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.container {

 padding: 69px 0 54px 0;

}

 

table {

 border-collapse: collapse;

 border-color: transparent;

 text-align: center;

}

 

.product_table,

.product_table tbody {

 width: 100%

}

 

.product_table tr:first-child {

 background: #ece6e6;

 color: #e66280;

 font-size: 20px;

}

 

.product_table td {

 border: 1px solid #f3e8e8;

 height: 62px;

 line-height: 62px;

}

 

.product_table a.update:link,

.product_table a.update:visited,

.product_table a.update:hover,

.product_table a.update:active {

 color: #1CE24A;

}

 

.product_table a.delete:link,

.product_table a.delete:visited,

.product_table a.delete:hover,

.product_table a.delete:active {

 color: #ffa700;

}

 

.price_total_bottom {

 font-size: 20px;

 padding: 20px 10px;

}

 

.price_total_ms {

 text-align: right;

}

 

.price_total_bottom .price_total_ms label {

 margin-right: 100px;

}

 

.price_total_bottom .price_total_ms a {

 cursor: default;

 text-align: center;

 display: inline-block;

 font-size: 20px;

 color: #fff;

 font-weight: bold;

 width: 220px;

 height: 54px;

 line-height: 54px;

 border: 0;

 background-color: #f71455;

}

 

</style>

登录后复制

相关推荐:

Js实现前端全选和反选

jQuery实现复选框的全选和反选

jquery 实现的全选和反选_jquery

以上是实例详解vue2.0在table中实现全选和反选的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板