# 行编辑
可以批量对表格编辑和新增等操作
TIP
如果进行其它操作可以参考Form组件事件进行联动
# 普通用法
配置数据中$cellEdit为true即可开启首次编辑addRowBtn为行新增按钮，cellBtn设置为true则开启行编辑按钮，在配置中将编辑的字段设置cell为true,增删改查方法和crud组件使用一致，rowKey为主键的key，如果数据中存在主键，数据才会保存在表格中
<template>
<avue-crud ref="crud"
:option="option"
:data="data"
@row-update="addUpdate"
@row-save="rowSave"></avue-crud>
</template>
<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',
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>显示代码复制代码复制代码
# 内容自定义
<template>
<avue-crud ref="crud"
:option="option"
:data="data"
@row-update="addUpdate"
@row-save="rowSave"
@row-click="handleRowClick">
<template #age="{row}">
<el-tag>{{row.age}}</el-tag>
</template>
<template #age-form="{row,disabled}">
自定义:<el-input v-model="row.age"
:disabled="disabled"></el-input>
</template>
<span>
</span>
<template #name-form="{row}">
<el-input v-model="row.name"
:disabled="row.$index==2"></el-input>
</template>
<template #menu-left="{}">
<el-button @click="addRow">添加10条</el-button>
</template>
<template #menu="{row,index,size}">
<el-button @click="addBreakRow(row,index)"
:size="size"
type="primary"
text>向上添加</el-button>
<el-button @click="addNextRow(row,index)"
:size="size"
type="primary"
text>向下添加</el-button>
</template>
</avue-crud>
</template>
<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',
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>显示代码复制代码复制代码
# 按钮自定义
卡槽中的row.$cellEdit来判断是他的当前状态,cancelBtn为取消按钮
<template>
<avue-crud ref="crud"
:option="option"
:data="data"
@row-update="rowUpdate"
@row-save="rowSave"
@row-click="handleRowClick">
<template #menu="{row,index}">
<el-button text
type="primary"
:icon="row.$cellEdit?'el-icon-plus':'el-icon-edit'"
@click="rowCell(row,index)">{{row.$cellEdit?'自定义保存':'自定义修改'}}</el-button>
<el-button v-if="row.$cellEdit"
text
icon="el-icon-cancel"
type="primary"
@click="$refs.crud.rowCancel(row,index)">取消</el-button>
</template>
</avue-crud>
</template>
<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>显示代码复制代码复制代码
# 多级联动
<template>
<avue-crud ref="crud"
:option="option"
:data="data">
</avue-crud>
</template>
<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>显示代码复制代码复制代码
# 行单击编辑
调用行单击事件，在调用内部rowEdit方法即可
<template>
<avue-crud ref="crud"
:data="data"
:option="option"
@row-click="handleRowClick"></avue-crud>
</template>
<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>显示代码复制代码复制代码
# 行双击编辑
调用行双击事件，在调用内部rowEdit方法即可
<template>
<avue-crud ref="crud"
:data="data"
:option="option"
@row-dblclick="handleRowDBLClick"></avue-crud>
</template>
<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>显示代码复制代码复制代码