小程序游戏开发平台_vue2.0在table中完成全选和反

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

其实在去年小颖已经写过一篇：

小颖今天在跟着慕课网学习vue的过程中，顺便试试如何在table中实现全选和反选，页面的css样式是直接参考慕课网的样式写的，js是小颖自己写哒，欢迎大家吐槽和点赞，嘻嘻

页面效果：

具体怎么实现的呢？

中已经有写项目是怎么创建的所以小颖在这里就不重复了，其实只是在上篇文章的基础上稍微做了改动：

App.vue文件

 template 
 div id="app" 
 router-view/ 
 /div 
 /template 
 script 
export default {
 name: 'app'
 /script 
 style 
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #2c3e50;
hgroup,
blockquote,
figure,
form,
fieldset,
input,
legend,
abbr,
button {
 margin: 0;
 padding: 0;
 list-style: none;
 margin: 0;
 padding: 0;
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 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文件

 template 
 div 
 div 
 span 购物车 /span 
 /div 
 table 
 tbody 
 template v-for="(list,index) in table_list" 
 td width="7%" min-width="94px" v-if="index===0" 
 input type="checkbox" v-model='checked' v-on:click='checkedAll' /td 
 td width="7%" v-if="index!==0" 
 input type="checkbox" v-model='checkList' :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" yen;{{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" 修改 /a 
 a href="#" rel="external nofollow" rel="external nofollow" 删除 /a 
 /td 
 /tr 
 /template 
 /tbody 
 /table 
 div 
 div 
 label 合计：{{allProductTotal}} /label 
 router-link to="/userAddress" 结账 /router-link 
 /div 
 /div 
 /div 
 /template 
 script 
import userAddress from './address'
export default {
 components: {
 userAddress
 data() {
 return {
 table_list: [{
 'id': 0,
 'product_inf': '商品信息',
 'product_price': '商品金额',
 'product_quantity': '商品数量',
 'total_amount': '总金额'
 }, {
 'id': '1',
 'product_inf': '女士银手链',
 'product_price': 120,
 'product_quantity': 200,
 'total_amount': 24000
 }, {
 'id': '2',
 'product_inf': '女士银手镯',
 'product_price': 380,
 'product_quantity': 200,
 'total_amount': 72000
 }, {
 'id': '3',
 'product_inf': '女士银耳环',
 'product_price': 100,
 'product_quantity': 200,
 'total_amount': 20000
 checked: false,
 allProductTotal: null,
 checkList: ['1', '3']
 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
 'checkList': {
 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 ponent only -- 
 style scoped 
.container {
 padding: 69px 0 54px 0;
table {
 border-colla凡科抠图e: colla凡科抠图e;
 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 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。