vue 實現(xiàn)多選元素的方法?

 <el-col :span="3" v-for="item in tableData" class="item" :key="item.id">
        <div @click="handleItemClick(item)">
          <div class="selected" v-if="item.isSelected">√</div>
          <div class="header">{{item.name}}</div>
          <div class="left-circle"></div>
          <div class="left"></div>
          <div class="middle">
            <div class="price text" v-if="item.groupGoodsVO">{{item.groupGoodsVO.goodsName}}</div>
            <div class="price" v-else>
              <span>￥</span>{{item.price | money}}
            </div>
            <div class="condition">
              {{item.money === -1 ? '無金額門檻' : `滿${(item.money / 100).toFixed(0)}元可用`}}
            </div>
            <div class="date">
              {{getValidDate(item)}}
            </div>
          </div>
          <div class="right-circle"></div>
          <div class="right"></div>
          <div class="bottom">
            <div class="bottom-text">
              <span class="label">限品類：</span>
              <span class="value">{{item.groupRuleGoodsVO ? '限部分商品' : '不限'}}</span>
              <span class="label">限平臺：</span>
              <span class="value">{{item.groupRuleGoodsVO ? '限部分平臺' : '不限'}}</span>
              <span class="label">券編號：</span>
              <span class="value">{{item.codeRule}}</span>
            </div>
      </el-col>

 handleItemClick (item) {
        this.tableData.map((data) => {
          this.$set(data, 'isSelected', item.id === data.id);
        });
      }

handleItemClick 方法怎么改才能實現(xiàn)多選然后保存一個數(shù)組呢

回答

編輯回答

舊城人

多選組件應該盡可能通過原生 HTML 來做，不建議采用任何 JS 模擬的方式。

具體的做法可以利用 <label> 的 for 屬性。<label> 基本上是一個普通容器，通過修改它的 CSS 我們可以讓它以任何形態(tài)呈現(xiàn)。CSS3 里新增了 + 選擇器，a + b 意味著選擇 a 后面緊跟著的 b 選擇器。結合這兩者我們就可以實現(xiàn)任何樣式的多選/單選組件了。

我簡單寫個代碼范例吧：

<div class="product-list">
  <template v-for="item in products">
    <input type="checkbox" v-model="selected" :value="item.id" :id="'product-' + item.id" class="hide" name="product" >
    <label :for="'product-' + item.id">
      <img :src="item.photo">
      <h3>{{item.title}}</h3>
      <p>價格：￥{{item.price}}</p>
    </label>
  </template>
</div>

你可以參考我的這篇文章: 純CSS實現(xiàn)多選組件，我還做過一次講堂寫 CSS 也要開腦洞：萬能的 :checked + label。

2018年7月23日 15:19