行编辑

约 333 字大约 1 分钟

2025-02-06

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

提示

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

普通用法

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

内容自定义

和普通的卡槽用法一致，可以参考[自定义列](/crud/crud-column.html#自定义列)和[自定义表单](/crud/crud-form.html#自定义表单)

<template>
  <tvue-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>
  </tvue-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>
  <tvue-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>
  </tvue-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>

多级联动

行单击编辑

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

行双击编辑

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