标签：checked 项目 checklist allChecked element 全选 orderItemDtos 购物车 data

数据的处理问题

  <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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。