行编辑

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

提示

如果进行其它操作可以参考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 setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  { id: 0, sex: 1, age: 18, $cellEdit: true },
  { id: 1, name: '李四', age: 18, sex: 0 }
]);

const option = ref({
  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
    }
  ]
});

function rowSave (form, done) {
  ElMessage.success('新增数据' + JSON.stringify(form));
  done();
}

function addUpdate (form, index, done, loading) {
  ElMessage.success('模拟网络请求');
  setTimeout(() => {
    ElMessage.success('关闭按钮等待');
    loading();
  }, 1000);
  setTimeout(() => {
    ElMessage.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 setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([{
  id: 0,
  sex: 1,
  age: 18,
  $cellEdit: true
}, {
  id: 1,
  name: '李四',
  age: 18,
  sex: 0,
}, {
  id: 1,
  name: '王五',
  age: 18,
  sex: 0,
  $cellEdit: true
}]);

const option = ref({
  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
  }]
});

const addUpdate = (form, index, done, loading) => {
  ElMessage.success('模拟网络请求');
  setTimeout(() => {
    ElMessage.success('关闭按钮等待');
    loading();
  }, 1000);
  setTimeout(() => {
    ElMessage.success(
      '编辑数据' + JSON.stringify(form) + '数据序号' + index
    );
    done();
  }, 2000);
};

const rowSave = (form, done) => {
  ElMessage.success(
    '新增数据' + JSON.stringify(form)
  );
  done();
};

const addRow = () => {
  ElMessage.success('正在添加，请稍后');
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      refs.crud.rowCellAdd({
        name: '',
      });
    }
  }, 500);
};

const addNextRow = (row, index) => {
  data.value.splice(index + 1, 0, {
    $cellEdit: true
  });
};

const addBreakRow = (row, index) => {
  data.value.splice(index, 0, {
    $cellEdit: true
  });
};

const handleRowClick = (row) => {
  ElMessage({
    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="rowCancel(row, index)">
        取消
      </el-button>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const data = ref([
  { id: 0, name: '张三', sex: 1, $cellEdit: true },
  { id: 1, name: '李四', sex: 0 }
])

const option = ref({
  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
    }
  ]
})

const crud = ref(null)
const rowCell = (row, index) => {
  crud.value.rowCell(row, index)
}

const rowCancel = (row, index) => {
  crud.value.rowCancel(row, index)
}

const rowSave = (form, done) => {
  ElMessage.success('新增数据: ' + JSON.stringify(form))
  done()
}

const rowUpdate = (form, index, done) => {
  ElMessage.success('编辑数据: ' + JSON.stringify(form) + ' 数据序号: ' + index)
  done()
}

const handleRowClick = (row, event, column) => {
  ElMessage({
    showClose: true,
    message: '序号: ' + row.id,
    type: 'success'
  })
}
</script>

多级联动

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data">
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue'

const baseUrl = 'https://api.avuejs.com/area'

const data = ref([
  { id: 1, province: '130000', city: '130200', area: '130202', $cellEdit: true },
  { id: 2, province: '110000', city: '110100', area: '110101', $cellEdit: true }
])

const option = ref({
  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' }]
    }
  ]
})

const crud = ref(null)

const addRow = () => {
  crud.value.rowCellAdd({
    id: 3,
    province: '110000',
    $cellEdit: true
  })
}
</script>

行单击编辑

效果预览可直接操作下方示例

监听行单击后调用 rowCellEdit(row, row.$index) 进入行编辑；rowEdit 打开的是弹窗，两者用途不同。

正在加载示例…

<template>
  <div>
    <avue-crud ref="crud"
               :data="data"
               :option="option"
               @row-click="handleRowClick"
               @row-update="saveRow" />
    <p aria-live="polite">{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const crud = ref(null);
const message = ref('点击行后直接编辑，保存或取消可结束编辑。');
const data = ref([
  { id: 1, name: '张三', role: '前端工程师' },
  { id: 2, name: '李四', role: '产品经理' }
]);
const option = ref({
  rowKey: 'id',
  cellBtn: true,
  addBtn: false,
  delBtn: false,
  gridBtn: false,
  refreshBtn: false,
  columnBtn: false,
  column: [
    { label: '姓名', prop: 'name', cell: true, rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }] },
    { label: '岗位', prop: 'role', cell: true }
  ]
});
function handleRowClick(row) {
  if (!row.$cellEdit) crud.value.rowCellEdit(row, row.$index);
}
function saveRow(row, index, done) {
  done(row);
  message.value = '已保存 #' + row.id + '：' + row.name;
}
</script>

行双击编辑

效果预览可直接操作下方示例

监听行双击后调用 rowCellEdit(row, row.$index) 进入行编辑。处理函数只需使用第一个 row 参数，不依赖双击事件的其他参数。

正在加载示例…

<template>
  <div>
    <avue-crud ref="crud"
               :data="data"
               :option="option"
               @row-dblclick="handleRowDoubleClick"
               @row-update="saveRow" />
    <p aria-live="polite">{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const crud = ref(null);
const message = ref('双击行后直接编辑，保存或取消可结束编辑。');
const data = ref([
  { id: 1, name: '张三', role: '前端工程师' },
  { id: 2, name: '李四', role: '产品经理' }
]);
const option = ref({
  rowKey: 'id',
  cellBtn: true,
  addBtn: false,
  delBtn: false,
  gridBtn: false,
  refreshBtn: false,
  columnBtn: false,
  column: [
    { label: '姓名', prop: 'name', cell: true, rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }] },
    { label: '岗位', prop: 'role', cell: true }
  ]
});
function handleRowDoubleClick(row) {
  if (!row.$cellEdit) crud.value.rowCellEdit(row, row.$index);
}
function saveRow(row, index, done) {
  done(row);
  message.value = '已保存 #' + row.id + '：' + row.name;
}
</script>