Avue

行编辑

... 2021-7-29 About 5 min

# 行编辑

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

Tips

如果进行其它操作可以参考Form组件事件进行联动

# 普通用法

配置数据中$cellEdit为true即可开启首次编辑addRowBtn为行新增按钮，cellBtn设置为true则开启行编辑按钮，在配置中将编辑的字段设置cell为true,增删改查方法和crud组件使用一致，rowKey为主键的key，如果数据中存在主键，数据才会保存在表格中


<avue-crud ref="crud" :option="option" :data="data" @row-update="addUpdate" @row-save="rowSave"  ></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          id:0,
          sex:1,
          age:18,
          $cellEdit:true
       },{
          id:1,
          name:'李四',
          age:18,
          sex:0,
       }],
       option:{
        addBtn:false,
        addRowBtn:true,
        cellBtn:true,
        menuWidth:250,
        column: [{
            label:'姓名',
            prop: 'name',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
              }
            ]
        },{
            label:'性别',
            prop: 'sex',
            type:'select',
            dicData:[{
              label:'男',
              value:0
            },{
              label:'女',
              value:1
            }],
            cell: true
        },{
            label:'年龄',
            prop: 'age',
            slot:true,
            formslot:true,
            dicData:[{
              label:'男',
              value:0
            },{
              label:'女',
              value:1
            }],
            rules: [
              {
                required: true,
                message: '请输入年龄',
                trigger: 'blur'
              }
            ],
            cell: true
          },{
            label:'开关',
            prop: 'switch',
            type:'switch',
            cell: true
        }]
      }
    }
  },
  methods:{
    rowSave(form, done) {
        this.$message.success(
          '新增数据' + JSON.stringify(form)
        )
        done()
     },
    addUpdate(form,index,done,loading){
      this.$message.success('模拟网络请求')
      setTimeout(() => {
        this.$message.success('关闭按钮等待')
        loading()
      }, 1000)
      setTimeout(() => {
        this.$message.success(
          '编辑数据' + JSON.stringify(form) + '数据序号' + index
        )
        done()
      }, 2000)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
Expand Copy

# 内容自定义

和普通的卡槽用法一致，可以参考自定义列和自定义表单


<avue-crud ref="crud" :option="option" :data="data" @row-update="addUpdate" @row-save="rowSave"  @row-click="handleRowClick" >
  <template slot="age" slot-scope="{row}">
   <el-tag>{{row.age}}</el-tag>
  </template>
   <span slot="ageForm" slot-scope="{row,disabled}">
     自定义:<el-input v-model="row.age" :disabled="disabled"></el-input>
  </span>
  <template slot="nameForm" slot-scope="{row,disabled}">
    <el-input v-model="row.name" :disabled="row.$index==2"></el-input>
  </template>
  <template slot="menuLeft">
    <el-button @click="addRow" size="small">添加10条</el-button>
  </template>
   <template slot="menu" slot-scope="{row,index,size,type}">
    <el-button @click="addBreakRow(index)" :size="size" :type="type">向上添加</el-button>
    <el-button @click="addNextRow(index)" :size="size" :type="type">向下添加</el-button>
  </template>
</avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          id:0,
          sex:1,
          age:18,
          $cellEdit:true
       },{
          id:1,
          name:'李四',
          age:18,
          sex:0,
       },{
          id:1,
          name:'王五',
          age:18,
          sex:0,
          $cellEdit:true
       }],
       option:{
        addBtn:false,
        addRowBtn:true,
        cellBtn:true,
        menuWidth:250,
        column: [{
            label:'姓名',
            prop: 'name',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
              }
            ]
        },{
            label:'性别',
            prop: 'sex',
            type:'select',
            dicData:[{
              label:'男',
              value:0
            },{
              label:'女',
              value:1
            }],
            cell: true
        },{
            label:'年龄',
            prop: 'age',
            slot:true,
            formslot:true,
            dicData:[{
              label:'男',
              value:0
            },{
              label:'女',
              value:1
            }],
            rules: [
              {
                required: true,
                message: '请输入年龄',
                trigger: 'blur'
              }
            ],
            cell: true
          },{
            label:'开关',
            prop: 'switch',
            type:'switch',
            cell: true
        }]
      }
    }
  },
  methods:{
    rowSave(form, done) {
        this.$message.success(
          '新增数据' + JSON.stringify(form)
        )
        done()
     },
    addUpdate(form,index,done,loading){
      this.$message.success('模拟网络请求')
      setTimeout(() => {
        this.$message.success('关闭按钮等待')
        loading()
      }, 1000)
      setTimeout(() => {
        this.$message.success(
          '编辑数据' + JSON.stringify(form) + '数据序号' + index
        )
        done()
      }, 2000)
    },
    addRow() {
      this.$message.success('正在添加，请稍后')
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.$refs.crud.rowCellAdd({
            name: '',
          });
        }
      }, 500)
    },
    addNextRow(index){
      this.data.splice(index+1,0,{
        $cellEdit:true
      })
    },
    addBreakRow(index){
      this.data.splice(index,0,{
         $cellEdit:true
      })
    },
    handleRowClick(row, event, column) {
        this.$message({
          showClose: true,
          message: '序号' + row.$index,
          type: 'success',
        });
      }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
Expand Copy

# 按钮自定义

卡槽中的row.$cellEdit来判断是他的当前状态,cancelBtn为取消按钮


<avue-crud ref="crud" :option="option" :data="data" @row-update="rowUpdate"  @row-save="rowSave"  @row-click="handleRowClick" >
  <template slot-scope="{row,index}" slot="menu">
    <el-button
      type="text"
      size="small"
      :icon="row.$cellEdit?'el-icon-plus':'el-icon-edit'"
      @click="rowCell(row,index)"
      >{{row.$cellEdit?'自定义保存':'自定义修改'}}</el-button>
    <el-button v-if="row.$cellEdit"
      type="text"
      icon="el-icon-cancel"
      size="small"
      @click="$refs.crud.rowCancel(row,index)"
      >取消</el-button>
    
  </template>
</avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          id:0,
          name:'张三',
          sex:1,
          $cellEdit:true
       },{
          id:1,
          name:'李四',
          sex:0,
       }],
       option:{
        addBtn:false,
        editBtn:false,
        addRowBtn:true,
        cellBtn:false,
        cancelBtn:false,
        column: [{
            label:'姓名',
            prop: 'name',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
              }
            ]
        },{
            label:'性别',
            prop: 'sex',
            type:'select',
            dicData:[{
              label:'男',
              value:0
            },{
              label:'女',
              value:1
            }],
            cell: true
        },{
            label:'开关',
            prop: 'switch',
            type:'switch',
            cell: true
        }]
      }
    }
  },
  methods:{
     rowCell(row, index) {
        this.$refs.crud.rowCell(row, index)
      },
      rowSave(form, done) {
        this.$message.success(
          '新增数据' + JSON.stringify(form)
        )
        done()
     },
      rowUpdate(form, index, done) {
        this.$message.success(
          '编辑数据' + JSON.stringify(form) + '数据序号' + index
        )
        done()
      },
      handleRowClick(row, event, column) {
        this.$message({
          showClose: true,
          message: '序号' + row.$index,
          type: 'success',
        });
      }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
Expand Copy

# 多级联动

Tips

2.9.0+


<avue-crud ref="crud" :option="option" :data="data">
</avue-crud>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data(){
    return {
      data:[ {
          id: 1,
          province: '130000',
          city: '130200',
          area: '130202',
          $cellEdit:true
        },
        {
          id: 2,
          province: '110000',
          city: '110100',
          area: '110101',
          $cellEdit:true
        }],
       option:{
          addRowBtn:true,
          addBtn:false,
          cellBtn:true,
          column: [{
              label: '省份',
              prop: 'province',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              cell: true,
              cascader: ['city'],
              dicUrl: `${baseUrl}/getProvince`,
              rules: [
                {
                  required: true,
                  message: '请选择省份',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '城市',
              prop: 'city',
              type: 'select',
              cell: true,
              cascader: ['area'],
              props: {
                label: 'name',
                value: 'code'
              },
              dicUrl: `${baseUrl}/getCity/{{key}}`,
              rules: [
                {
                  required: true,
                  message: '请选择城市',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '地区',
              prop: 'area',
              cell: true,
              props: {
                label: 'name',
                value: 'code'
              },
              type: 'select',
              dicUrl: `${baseUrl}/getArea/{{key}}`,
              rules: [
                {
                  required: true,
                  message: '请选择地区',
                  trigger: 'blur'
                }
              ]
            }
          ]
      }
    }
  },
  methods:{
    addRow() {
     this.$refs.crud.rowCellAdd( {
        id: 3,
        province: '110000',
        $cellEdit:true
      });
    },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
Expand Copy

# 行单击编辑

调用行单击或双击事件，在调用内部rowEdit方法即可

<avue-crud ref="crud" :data="data" :option="option" @row-click="handleRowClick"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          menu:false,
          dialogType:'drawer',
          dialogWidth:800,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      };
    },
    methods: {
        handleRowClick (row, event, column) {
          this.$refs.crud.rowEdit(row,row.$index);
        },
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Expand Copy

# 行双击编辑

<avue-crud ref="crud" :data="data" :option="option" @row-dblclick="handleRowDBLClick"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          menu:false,
          dialogType:'drawer',
          dialogWidth:800,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    },
    methods: {
       handleRowDBLClick (row, event) {
        this.$refs.crud.rowEdit(row,row.$index);
      },
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Expand Copy
Last update: August 14, 2024 15:38
Contributors: smallwei

权限控制

您正在浏览基于 Vue 2.x 的 Avue 文档; 点击这里 查看 Vue 3.x 的升级版本