Crud 模块

多选

多选 - 图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>