前端那些事20240201-前端那些事-avue2 表格行配置 行多选

<avue-crud ref="crud" :data="data" :option="option" @selection-change="selectionChange">
   <template slot="menuLeft" slot-scope="{size}">
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleAllSelection()">选中全部</el-button>
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleRowSelection(data[0])">选中第一行</el-button>
    <el-button type="success" icon="el-icon-check" :size="size" @click="toggleSelection([data[1]])">选中第二行</el-button>
    <el-button type="danger" icon="el-icon-delete" :size="size" @click="toggleSelection()">取消选择</el-button>
  </template>
</avue-crud>
<script>
export default {
    data() {
      return {
        data: [{
          id:1,
          name: '张三',
          sex: '男'
        },{
          id:2,
          name: '李四',
          sex: '女'
        }],
        option:{
          selection: true,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
    methods: {
      selectionChange(list){
        this.$message.success('选中的数据'+ JSON.stringify(list));
      },
      toggleAllSelection(){
        this.$refs.crud.$refs.table.toggleAllSelection()
      },
      toggleSelection(data){
        //传递数组进去，会勾选数组中的对象，如果已经勾选则会取消勾选
        this.$refs.crud.toggleSelection(data);
      },
      toggleRowSelection(row){
        //第一个参数为数据，第二个参数为是否勾选
        this.$refs.crud.toggleRowSelection(row,true);
      }
    }
}
</script>

运行结果