前端那些事20240201-前端那些事-avue2 翻页多选

<avue-crud  :page.sync="page" :data="data" :option="option" @selection-change="selectionChange" @on-load="onLoad">
</avue-crud>
<script>
export default {
    data() {
      return {
         page: {
          pageSize: 2,
          pageSizes:[2]
        },
        data: [],
        option:{
          selection: true,
          reserveSelection:true,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      onLoad(page) {
        this.page.total = 4
        //模拟分页
        if (this.page.currentPage === 1) {
          this.data = [
            {
              id:1,
              name: '张三',
              sex: '男'
            },{
              id:2,
              name: '李四',
              sex: '女'
            }
          ]
        } else if (this.page.currentPage == 2) {
          this.data = [
            {
              id:3,
              name: '王五',
              sex: '女'
            },{
              id:4,
              name: '赵六',
              sex: '女'
            }
          ]
        }
      },
      selectionChange(list){
        this.$message.success('选中的数据'+ JSON.stringify(list));
      }
    }
}
</script>

运行结果