• 欢迎访问1024小神,一个只会Python的程序猿不是一个好司机
  • 有什么想对我说的可以在留言板里给我留言哦~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏1024小神吧

iview + vue table分页勾选记忆

JS/JQ/Vue 1024小神 10个月前 (12-04) 237次浏览 1个评论

想法:

1,已知给 data 项设置特殊 key _checked: true 可以默认选中当前项
2,用tempArr[]记录勾选的数据的id,勾选时则加入,取消时则删除。
3,渲染数据时,对比tempArr[]的id

<script>
export default {
  data () {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: 'Date',
          key: 'date',
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age',
        },
      ],
      datas: [], // 表格绑定数据
      tempArr: [] // 记录已经勾选的数据
    }
  },
  methods: {
    // 页码改变时触发
    handlePageChange (currentPage) {
      // 模拟接口数据第一页 
      let data1 = [
        {
          id: 1,
          name: 'John Brown',
          age: 18,
          date: '2016-10-03'
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 24,
          date: '2016-10-01'
        },
        {
          id: 3,
          name: 'Joe Black',
          age: 30,
          date: '2016-10-02'
        },
      ],
        // 模拟接口数据第二页
        data2 = [
          {
            id: 4,
            name: 'aaa',
            age: 1,
            date: '2010-11-03'
          },
          {
            id: 5,
            name: 'bbb',
            age: 2,
            date: '2010-11-01'
          },
          {
            id: 6,
            name: 'ccc',
            age: 3,
            date: '2010-11-02'
          },
        ]
      // 模拟返回接口
      this.datas = currentPage === 1 ? data1 : data2
      this.handleTableChecked(this.datas) // 恢复有勾选的数据
    },

    // ---------------------------分页记忆---------------------------
    /**
     * @param {*} selection 已选项数据
     * @param {*} row 刚选择的项数据
     * @description 勾选table某一项时触发
     */
    onSelect (selection, row) {
      this.tempArr.push(row.id) // 将该条数据添加到tempArr中
      this.datas.forEach(item => { // 本页数据中找到该条勾选数据并添加属性_checked = true
        if (item.id === row.id) {
          item['_checked'] = true
        }
      })
    },

    /**
     * @param {*} selection 已选项数据
     * @param {*} row 刚取消选择的项数据
     * @description 取消table某一项时触发
     */
    onSelectCancel (selection, row) {
      this.tempArr.forEach((item, index) => { // tempArr中找到该条数据并删除
        if (row.id === item) {
          this.tempArr.splice(index, 1)
        }
      })
    },

    /**
     * @param {*} selection 已选项数据
     * @description table全选时触发
     */
    onSelectAll (selection) {
      selection.forEach(item => { // 将本页全部勾选添加到tempArr中
        this.tempArr.push(item.id)
      })
      this.tempArr = Array.from(new Set(this.tempArr)) // 去重
    },

    /**
     * @param {*} selection 已选项数据
     * @description table取消全选时触发
     */
    onSelectAllCancel (selection) {
      this.datas.forEach(item => { // tempArr中找到该条数据并删除
        this.tempArr.forEach((e, index) => {
          if (item.id === e) {
            this.tempArr.splice(index, 1)
          }
        })
      })
    },

    /**
     * @param {*} datas 当前页数据
     * @description 还原有勾选的数据
     */
    handleTableChecked (datas) {
      this.tempArr.forEach(item => { // 判断本页数据状态
        datas.forEach(e => {
          if (item === e.id) {
            e['_checked'] = true
          }
        })
      })
    }
  }
}
</script>

iview + vue table分页勾选记忆


如有失效,请留言告知丨转载请注明原文链接:iview + vue table分页勾选记忆
点赞 (0)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 木木vip
    这个挺实用的!
    2021-01-26 10:15