• 多选
    • 普通用法

    多选

    TIP

    1.0.0+

    普通用法

    多选 - 图1

    设selection属性为true即可；勾选的同时会回调selectionChange方法返回当前选中的数据,setCurrent方法设置选中的行,selectable函数决定该行是否可以勾选

    2. <avue-crud ref="crud" :data="data" :option="option4" @selection-change="selectionChange">
    3.    <template slot="tip">
    4.     <el-button type="text" size="small">
    5.       自定义按钮
    6.     </el-button>
    7.     <span>自定义内容</span>
    8.   </template>
    9. </avue-crud>
    10. <div style="margin-top: 20px">
    11.   <el-button @click="toggleSelection([data[1]])">选中第二行</el-button>
    12.   <el-button @click="toggleSelection()">取消选择</el-button>
    13. </div>
    14. <script>
    15. export default {
    16.     data() {
    17.       return {
    18.         data: [
    19.           {
    20.             name:'张三',
    21.             sex:'男'
    22.           }, {
    23.             name:'李四',
    24.             sex:'女'
    25.           }
    26.         ],
    27.         option4:{
    28.           selection: true,
    29.           selectable:(row,index)=>{
    30.             return index===1;
    31.           },
    32.           page:false,
    33.           align:'center',
    34.           menuAlign:'center',
    35.           column:[
    36.              {
    37.               label:'姓名',
    38.               prop:'name'
    39.             }, {
    40.               label:'性别',
    41.               prop:'sex'
    42.             }
    43.           ]
    44.         },
    45.       };
    46.     },
    47.     methods: {
    48.       selectionChange(list){
    49.         this.$message.success('选中的数据'+ JSON.stringify(list));
    50.       },
    51.       toggleSelection(val){
    52.         this.$refs.crud.toggleSelection(val);
    53.       }
    54.     }
    55. }
    56. </script>