vue 工作專案中 實現訊息列表的 全選，反選，刪除功能

恍然如夢發表於2018-10-13
Vue

template HTML 結構

radio 我是用的vux 中的checker 元件；(這個可以改成原生radio ；也可以繫結v-model)

<div class="list" v-for="(item,index) in messageList">
        <div class="top flex-row">
          <div class="radio article flex-grow-0">
            <checker v-model="item.model" @click.native="change(index)" default-item-class="defaultClass"
                     selected-item-class="selectedClass">
              <checker-item @on-item-click="onItemClick" :value="item.id"></checker-item>
            </checker>
          </div>
          <div class="time flex-grow-1 flex-right">
            <div>{{item.insertTime}}</div>
          </div>
        </div>
        <div @click="toDetails(item.id)" class="bottom flex-row">
          <div v-if="item.hasRead==0" class="small_article flex-grow-0"></div>
          <div class="flex-grow-1">
            <div class="title">{{item.title}}</div>
            <p class="desc">{{item.content}}</p>
          </div>
        </div>
      </div>複製程式碼

先看頁面圖吧

vue 工作專案中 實現訊息列表的 全選，反選，刪除功能

主要用的是知識點 就是 vue 中的 $set 方法；可以給任意物件設定屬性，

這裡就是沒選一個就給當前項的list設定一個checked 屬性true 否則就是false

change(index) {
        if (this.parentVal) {
          this.$set(this.messageList[index], 'checked', true);
        } else {
          this.$set(this.messageList[index], 'checked', false);
        }
        // console.log(this.selectMessage);
      },複製程式碼

再來一個計算屬性來過濾控制messageList中那幾個別選中並存在一個陣列中

computed: {
      selectMessage() {
        let selectMessage = [];
        this.messageList.forEach((val) => {
          if (val.checked) {
            selectMessage.push(val);
            //val.model=val.selected;
          }
        });
        return selectMessage;
      }
    },複製程式碼

在來看看頂部選項的操作

topItemClick(index) {
        var that = this;
        //刪除
        if (index == 2) {
          if (this.selectMessage.length > 0) {
            var messageIds = '';
            this.selectMessage.forEach((val) => {
              if (val.checked) {
                messageIds += val.id + ',';
              }
            });
            messageIds = messageIds.substr(0, messageIds.length - 1)
            this.$vux.confirm.show({
              title: '溫馨提示',
              content: `確定要刪除該訊息`,
              confirmText: '確定',
              onCancel() {
​
              },
              onConfirm(msg) {
                that.$ajax.get(MESSAGEDELETE, {
                  messageIds: messageIds
                }, res => {
                  that.initData();
                });
              }
            });
          }
        } else if (index == 0) {//全選
          this.messageList.forEach((val, index) => {
            if (val) {
              this.$set(this.messageList[index], 'model', val.id);
              this.$set(this.messageList[index], 'checked', true);
            }
          })
        } else if (index == 1) {//反選
          this.messageList.forEach((val, index) => {
            if (val.checked) {
              this.$set(this.messageList[index], 'model', '');
              this.$set(this.messageList[index], 'checked', false);
            } else {
              this.$set(this.messageList[index], 'model', val.id);
              this.$set(this.messageList[index], 'checked', true);
            }
          })
        }
      },複製程式碼

複習哈 陣列api -> splice

splice(index,len,[item]) 註釋：該方法會改變原始陣列。

splice有3個引數，它也可以用來替換/刪除/新增陣列內某一個或者幾個值

index:陣列開始下標 len: 替換/刪除的長度 item:替換的值，刪除操作的話 item為空

刪除 arr.splice(1,1)

替換 arr.splice(1,1,'ttt')

新增 arr.splice(1,0,'ttt' )


相關文章