Vue 实现列表的选中

   <!--添加资源弹窗 start-->
    <div class="actionModel" v-show="isAddResources">
      <div class="addResourcesModel">
        <div class="titleAndSearch">
          <span class="title">添加资源</span>
          <el-input class="search" placeholder="快速查找" prefix-icon="el-icon-search" v-model="input2"></el-input>
        </div>
        <div class="optionalList" v-infinite-scroll="load" style="overflow:auto">
          <div
            class="optionalItem"
            v-for="item in fileData"
            :key="item.id"
            @click="checkResources(item.id)"
          >
            <img
              class="icon"
              :src="item.isCheck?$utils.getPng('jxph_selected'):$utils.getPng('jxph_unselect')"
            />
            <div class="optionalItemCon">
              <img class="left" :src="item.cover" />
              <div class="right">
                <span class="name">{{item.name}}</span>
                <span class="time">上传时间：{{item.time}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <span class="sure" @click="dealAddResources">确定</span>
          <span class="cancel" @click="isAddResources=false">取消</span>
        </div>
      </div>
    </div>

<script>
import Vue from 'vue'
export default {
  name: 'downApp',
  data () {
    return {
      checkedFiles: [], // 添加资源时选中的资源文件
      fileData: [
        {
          cover:
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=412581515,2728114228&fm=26&gp=0.jpg',
          name: '接下来从为谷',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 0,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703700261,3059129314&fm=26&gp=0.jpg',
          name: '血豆腐，腊大肠，猪油渣炒豆豉，酸辣火锅，贵州人的最爱',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 1,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ucgimg.fmapp.com/Public/imgquality/attached/image/20200526/20200526092809_22544.png',
          name: '接下来从为谷歌做的一系列插图和动画推广',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 3,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ucgimg.fmapp.com/Public/imgquality/attached/image/20200527/20200527092408_50319.png',
          name: '血豆腐，腊大肠，猪油渣炒豆豉，酸辣火锅，贵州人的最爱',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 4,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1470333940,2954414069&fm=26&gp=0.jpg',
          name: '接下来从为谷歌做的一系列插图和动画推广',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 5,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1622674982,3309331290&fm=26&gp=0.jpg',
          name: '血豆腐，腊大肠，猪油渣炒豆豉，酸辣火锅，贵州人的最爱',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 6,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2553796999,3615734622&fm=26&gp=0.jpg',
          name: '接下来从为谷歌做的一系列插图和动画推广',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 7,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2792268783,4083083589&fm=15&gp=0.jpg',
          name: '血豆腐，腊大肠，猪油渣炒豆豉，酸辣火锅，贵州人的最爱',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 8,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2792268783,4083083589&fm=15&gp=0.jpg',
          name: '血豆腐，腊大肠，猪油渣炒豆豉，酸辣火锅，贵州人的最爱',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 8,
          time: '2020-12-10'
        },
        {
          cover:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2792268783,4083083589&fm=15&gp=0.jpg',
          name: '血豆腐，腊大肠，猪油渣炒豆豉，酸辣火锅，贵州人的最爱',
          username: '秋田依',
          tag: '技术达人',
          desc:
            '《NBA 2K14》将首次加入欧洲联赛的队伍，在3年后重新加入国际篮球因素。14只顶尖欧洲联赛俱乐部将会加入到游戏中。这些队伍可以在游戏中被选择用来对抗美国球队。 ',
          id: 8,
          time: '2020-12-10'
        }
      ],
    }
  },
  created () {
  },
  methods: {
    // 当个点击选中
    checkResources (id) {
      console.log(id, 'id')
      // 点击文件选中
      var tmpfiles = this.fileData
      var jtmpfiles = this.checkedFiles
      for (var i = 0, len = tmpfiles.length; i < len; i++) {
        if (tmpfiles[i].id === id) {
          tmpfiles[i].isCheck = !tmpfiles[i].isCheck
          if (tmpfiles[i].isCheck) {
            this.checkedFiles.push(id)
          } else {
            for (var j = 0, jlen = jtmpfiles.length; j < jlen; j++) {
              if (jtmpfiles[j] === id) {
                Vue.delete(this.checkedFiles, j)
              }
            }
          }
          Vue.set(this.fileData, i, tmpfiles[i])
          return
        }
      }
    },
  // 确定添加资源
    dealAddResources () {
      console.log(this.checkedFiles, 'checkedFiles')
      this.isAddResources = false
    },
  },
}
</script>