项目的购物车之全选和不全选

数据的处理问题

  <input type="number"
                 :value="min"
                 @change="MIN"
                 step="0.01"
                 min="0.01"
                 placeholder="最低价"
                 class="mx">
  <text class="ddd"> — </text>
 <input type="number"
                 :value="max"
                 @change="MAX"
                 placeholder="最高价"
                 class="mx">

项目需要，数据处理的时候都是小数点后有两位小数，同时当用户输入0开头的时候，取消掉0

data(){
	return{
		min: null,
      max: null,
	}
}
methods:{
    MIN (e) {
          this.min = parseFloat(e.detail.value).toFixed(2)
        },
    MAX (e) {
      this.max = parseFloat(e.detail.value).toFixed(2)
    },
}

uniapp中的全选问题

子组件：

 <block v-for="(text,index) in item.orderItemDtos"
           :key="index">
      <view class="intro-content">
        <label v-if="states==3||states==4">
          <checkbox :data-index="index"
                    :data-scindex="index"
                    :value="toString(text.prodId)"
                    :checked="text.checked"
                    :data-proId="text.prodId"
                    @tap="onSelectedItem">
          </checkbox>
        </label>
        <view>具体的数据</view>
        </view>
  </block>
  props: ['states', 'item', "list"],
    methods: {
    // 单选状态
    onSelectedItem (e) {

      let check = this.item.orderItemDtos[0].checked
      this.item.orderItemDtos[0].checked = !check
      // 如果选中
      if (this.item.orderItemDtos[0].checked) {

        this.$emit('addList', { data: this.item.orderItemDtos[0] })
      } else {
      
        this.$emit('removeList', { data: this.item.orderItemDtos[0] })
      }
    },

父组件

 <checkbox-group class="block">
          <!-- 订单列表 -->
          <choose :states="states"
                  class="maininfo"
                  v-for="(v,index) in list"
                  :key="index"
                  :item="v"
                  :list="list"
                   @addList='addList'
                   @removeList='removeList'>
          </choose>
  </checkbox-group>
  
  <checkbox-group @change="allchoose">
              <label>
                <checkbox value="all"
                          :checked="allChecked">
                </checkbox>
              </label>
              <text>全选</text>
   </checkbox-group>
   
  date(){
  	return{
  		allChecked: false,//是否全选
      list: [],
      checklist: [],//选择数组
      prodIds: []//全选后的id值
  	}
  }
  
  methods:{
  		//全选按钮
    allchoose () {
      if (!this.allChecked) {
        this.checklist = []
        this.list.forEach(element => {

          console.log(element.orderItemDtos[0].checked)
          if (!element.orderItemDtos[0].checked) {
            element.orderItemDtos[0].checked = true
            this.checklist.push(element.orderItemDtos[0])
            this.allChecked = true
          } else {
            this.checklist.push(element.orderItemDtos[0])
          }
        });
      } else {
        this.checklist = [],
          this.list.forEach(element => {
            element.orderItemDtos[0].checked = false
            this.allChecked = false
          });
      }

      console.log(this.checklist)
    },
    // 添加选中项
    addList (data) {

      if (this.allChecked) {
        this.allChecked = false
      }
      this.checklist.push(data.data)
      if (this.list.length == this.checklist.length) {
        this.allChecked = true
      }
    },
    //移除选中项
    removeList (data1) {
      if (this.allChecked) {
        this.allChecked = false
      }
      let data = data1.data
      this.checklist.forEach((element, index) => {
        if (element.prodId == data.prodId) {
          this.checklist.splice(index, 1)
        }
        this.list.forEach((item, index) => {
          if (item.orderItemDtos[0].prodId == data.prodId) {
            this.list[index].orderItemDtos[0].checked = false
          }
        })
      });

      console.log(this.checklist)
    },
  }

标签：checked,项目,checklist,allChecked,element,全选,orderItemDtos,购物车,data
来源： https://blog.csdn.net/qq_45903009/article/details/119452842