vue list列表全选，单选 ，翻页功能

<template>
  <div class="searchItem">
    <div>
      <el-checkbox
        :indeterminate="indeterminate"
        :value="checkedAll"
        @change="onCheckAllChange"
        >本页全选</w-checkbox
      >
      <span><el-button>批量下载</el-button></span>
      <span><el-button>全部下载</el-button></span>
    </div>
    <div
      v-for="(item, idx) in msgList"
      :key="item.msgCode"
    >
      <div>
        <div>
          <el-checkbox
            :key="item.msgCode"
            :value="setOfCheckedId.includes(item.msgCode)"
            @change="onItemChecked($event, item.msgCode)"
          ></el-checkbox>
        </div>
        <div>
          <div>
            <span>{{ item.title }}</span>
          </div>
          <p class="content">{{ item.content }}</p>
        </div>
      </div>
    </div>
    <div class="pageDiv">
      <w-pagination
        style="float: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </w-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msgList: [
        {
          msgCode: 1,
          title: '天津一小区爆炸:楼体损毁严重',
          content:
            '7月19日7时15分许，天津市北辰区天穆镇欢颜里一老旧小区发生燃气爆燃，造成楼体受损，有群众被困。事故造成11人受伤，均无生命危险。经过四个多小时的紧张救援，有1人被成功救出，另1人正在全力救援中。此外，还有3名人员失联。接报后，市委书记李鸿忠，市委副书记、市长张工立即作出批示并赶赴现场，要求市应急局、北辰区迅即全力组织救援，把救人放在第一位，千方百计解救被困人员，严格加强现场安全警戒，切实防止次生事故发生。',
        },
        {
          msgCode: 2,
          title: '天津一小区爆炸:楼体损毁严重',
          content:
            '2022年7月19日7时15分许，在北辰区天穆镇欢颜里3号楼，一居民家中发生燃气爆燃，造成楼体受损。目前，现场有8人受伤，多为剐蹭伤，均无生命危险，正在全力组织救援。爆燃原因正在调查，善后安置工作正在有序进行。',
        }
      ],
      indeterminate: false,
      checkedAll: false,
      setOfCheckedId: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1
    }
  },
  methods: {
    // 全选
    onCheckAllChange (e) {
      this.msgList.forEach((item) =>
        this.updateCheckedSet(item.msgCode, e)
      )
      this.refreshCheckedStatus()
    },
    // 单挑选择
    onItemChecked (e, msgCode) {
      this.updateCheckedSet(msgCode, e)
      this.refreshCheckedStatus()
    },

    // 更新选择中的数据
    updateCheckedSet (msgCode, checked) {
      if (checked) {
        this.setOfCheckedId.push(msgCode)
        this.setOfCheckedId = [...new Set(this.setOfCheckedId)]
      } else {
        const index = this.setOfCheckedId.findIndex((item) => item === msgCode)
        this.setOfCheckedId.splice(index, 1)
      }
    },
    // 更新全选的状态
    refreshCheckedStatus () {
      if (this.msgList.length > 0) {
        this.checkedAll = this.msgList.every((item) =>
          this.setOfCheckedId.includes(item.msgCode)
        )
        this.indeterminate =
          this.msgList.some((item) =>
            this.setOfCheckedId.includes(item.msgCode)
          ) && !this.checkedAll
      } else {
        this.checkedAll = false
        this.indeterminate = false
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getListInfo()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getListInfo()
    }
  }
}
</script>
<style lang="scss" scoped>
.searchItem{
  .content{
    width:80%;
    overflow: hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp: 2;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
}
</style>