• 表格批量操作
    • 普通用法
    • 自定义用法

    表格批量操作

    可以批量对表格编辑和新增等操作

    普通用法

    批量操作 - 图1

    addRowBtn为行新增按钮，cellBtn设置为true则开启行编辑按钮，在配置中将编辑的字段设置cell为true,增删改查方法和crud组件使用一致，keyId为主键的key，用于检测是否添加成功或失败。

    2. <avue-crud ref="crud" :option="option" :data="data" @row-update="addUpdate">
    3.   <template slot="menuLeft">
    4.     <el-button @click="addRow" size="small">添加10条</el-button>
    5.   </template>
    6. </avue-crud>
    7. <script>
    8. export default {
    9.   data(){
    10.     return {
    11.        data:[{
    12.           id:0,
    13.           name:'张三',
    14.           sex:1,
    15.        },{
    16.           id:1,
    17.           name:'李四',
    18.           sex:0,
    19.        }],
    20.        option:{
    21.         keyId:'id',
    22.         addBtn:false,
    23.         editBtn:false,
    24.         addRowBtn:true,
    25.         cellBtn:true,
    26.         keyId: 'id',
    27.         column: [{
    28.             label:'姓名',
    29.             prop: 'name',
    30.             cell: true,
    31.             rules: [
    32.               {
    33.                 required: true,
    34.                 message: '请输入姓名',
    35.                 trigger: 'blur'
    36.               }
    37.             ]
    38.         },{
    39.             label:'性别',
    40.             prop: 'sex',
    41.             type:'select',
    42.             dicData:[{
    43.               label:'男',
    44.               value:0
    45.             },{
    46.               label:'女',
    47.               value:1
    48.             }],
    49.             cell: true
    50.         },{
    51.             label:'开关',
    52.             prop: 'switch',
    53.             type:'switch',
    54.             cell: true
    55.         }]
    56.       }
    57.     }
    58.   },
    59.   methods:{
    60.     addUpdate(form,index,done,loading){
    61.       this.$message.success('模拟网络请求')
    62.       setTimeout(() => {
    63.         this.$message.success('关闭按钮等待')
    64.         loading()
    65.       }, 1000)
    66.       setTimeout(() => {
    67.         this.$message.success(
    68.           '编辑数据' + JSON.stringify(form) + '数据序号' + index
    69.         )
    70.         done()
    71.       }, 2000)
    72.     },
    73.     addRow() {
    74.       this.$message.success('正在添加，请稍后')
    75.       setTimeout(() => {
    76.         for (let i = 0; i < 10; i++) {
    77.           this.$refs.crud.rowCellAdd({
    78.             name: '',
    79.           });
    80.         }
    81.       }, 500)
    82.     },
    83.   }
    84. }
    85. </script>

    自定义用法

    批量操作 - 图2

    cancelBtn为取消按钮

    2. <avue-crud ref="crud" :option="option1" :data="data" @row-update="addUpdate">
    3.   <template slot="menuLeft">
    4.     <el-button @click="addRow" size="small">添加10条</el-button>
    5.   </template>
    6.   <template slot-scope="{row,index}" slot="menu">
    7.     <el-button
    8.       type="text"
    9.       size="small"
    10.       @click="rowCell(row,index)"
    11.       >自定义修改</el-button
    12.     >
    13.   </template>
    14. </avue-crud>
    15. <script>
    16. export default {
    17.   data(){
    18.     return {
    19.        data:[{
    20.           id:0,
    21.           name:'张三',
    22.           sex:1,
    23.        },{
    24.           id:1,
    25.           name:'李四',
    26.           sex:0,
    27.        }],
    28.        option1:{
    29.         keyId:'id',
    30.         addBtn:false,
    31.         editBtn:false,
    32.         addRowBtn:true,
    33.         cellBtn:false,
    34.         cancelBtn:false,
    35.         keyId: 'id',
    36.         column: [{
    37.             label:'姓名',
    38.             prop: 'name',
    39.             cell: true,
    40.             rules: [
    41.               {
    42.                 required: true,
    43.                 message: '请输入姓名',
    44.                 trigger: 'blur'
    45.               }
    46.             ]
    47.         },{
    48.             label:'性别',
    49.             prop: 'sex',
    50.             type:'select',
    51.             dicData:[{
    52.               label:'男',
    53.               value:0
    54.             },{
    55.               label:'女',
    56.               value:1
    57.             }],
    58.             cell: true
    59.         },{
    60.             label:'开关',
    61.             prop: 'switch',
    62.             type:'switch',
    63.             cell: true
    64.         }]
    65.       }
    66.     }
    67.   },
    68.   methods:{
    69.      rowCell(row, index) {
    70.         this.$refs.crud.rowCell(row, index)
    71.       },
    72.       rowUpdate(form, index, done) {
    73.         this.$message.success(
    74.           '编辑数据' + JSON.stringify(form) + '数据序号' + index
    75.         )
    76.         done()
    77.       }
    78.   }
    79. }
    80. </script>