vue2.0在table中全选和反选

PHP中文网 • 2025年3月8日 13:07:32 • 编程技术 • 阅读 2

这次给大家带来vue2.0在table中全选和反选，vue2.0在table中全选和反选的注意事项有哪些，下面就是实战案例，一起来看一下。

具体怎么实现的呢？

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

App.vue文件

    
export default { name: 'app'}#app { font-family: 'Avenir', 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;}

登录后复制

home.vue文件

   
   购物车  
                                                    {{list.product_inf}}       {{list.product_price}}       ¥{{list.product_price}}       {{list.product_quantity}}       {{list.total_amount}}       编辑              修改       删除           
       
  
     
    合计：{{allProductTotal}}    结账   
  
 
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  } }}.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;}