vue-super-crud 1.7.1 → 1.7.4

package/docs/.vuepress/components/crud/tableEdit/controlEdit.vue

@@ -1,219 +0,0 @@
-<template>
-  <div>
-    <div class="demo-section">
-      <h3>控制行编辑状态：</h3>
-      <el-button @click="handleRowChange(0)">禁用第一行</el-button>
-      <el-button @click="handleRowChange(1)">禁用第二行</el-button>
-      <el-button @click="handleRowChange(2)">禁用第三行</el-button>
-      <el-button @click="handleRowChange(null)">取消禁用</el-button>
-    </div>
-
-    <div style="margin-bottom: 20px;">
-      <h3>控制列编辑状态：</h3>
-      <el-button @click="handleColumnChange('name')">禁用姓名列</el-button>
-      <el-button @click="handleColumnChange('gender')">禁用性别列</el-button>
-      <el-button @click="handleColumnChange('age')">禁用年龄列</el-button>
-      <el-button @click="handleColumnChange(null)">取消禁用</el-button>
-    </div>
-
-    <div style="margin-bottom: 20px;">
-      <h3>控制单元格编辑状态：</h3>
-      <el-button @click="handleCellChange('name')"
-        >禁用姓名第一个单元格</el-button
-      >
-      <el-button @click="handleCellChange('gender')"
-        >禁用性别第一个单元格</el-button
-      >
-      <el-button @click="handleCellChange('age')"
-        >禁用年龄第一个单元格</el-button
-      >
-      <el-button @click="handleCellChange(null)">取消禁用</el-button>
-    </div>
-
-    <sc-crud
-      :search.sync="searchForm"
-      ref="crud"
-      :options="options"
-      :data="data"
-    >
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      data: [
-        {
-          id: 1,
-          name: "张三",
-          gender: "男",
-          age: 20,
-          city: "北京",
-          date: "2021-01-01",
-        },
-        {
-          id: 2,
-          name: "李四",
-          gender: "女",
-          age: 21,
-          city: "上海",
-          date: "2021-01-02",
-        },
-        {
-          id: 3,
-          name: "王五",
-          gender: "男",
-          age: 22,
-          city: "广州",
-          date: "2021-01-03",
-        },
-        {
-          id: 4,
-          name: "赵六",
-          gender: "女",
-          age: 23,
-          city: "深圳",
-          date: "2021-01-04",
-        },
-      ],
-      disabledRowIndex: null,
-      disabledCellProp: null,
-      disabledCell: { row: null, prop: null },
-    };
-  },
-  computed: {
-    options() {
-      return {
-        editConfig: {
-          mode: "row",
-          batch: true,
-          edit: true,
-          isRowEdit: ({ row, $index }) => {
-            // 如果设置了禁用行索引，则该行不可编辑
-            if (this.disabledRowIndex !== null) {
-              return $index !== this.disabledRowIndex;
-            }
-            return true;
-          },
-        },
-        renderColumns: [
-          {
-            prop: "name",
-            label: "姓名",
-            isEdit: ({ row, $index }) => {
-              if (
-                this.disabledCell.row === 0 &&
-                this.disabledCell.prop === "name"
-              ) {
-                return $index !== 0;
-              }
-              return this.disabledCellProp !== "name";
-            },
-          },
-          {
-            prop: "gender",
-            label: "性别",
-            isEdit: ({ row, $index }) => {
-              if (
-                this.disabledCell.row === 0 &&
-                this.disabledCell.prop === "gender"
-              ) {
-                return $index !== 0;
-              }
-              return this.disabledCellProp !== "gender";
-            },
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: "男", label: "男" },
-                  { value: "女", label: "女" },
-                ],
-              },
-            },
-          },
-          {
-            prop: "age",
-            label: "年龄",
-            isEdit: ({ row, $index }) => {
-              if (
-                this.disabledCell.row === 0 &&
-                this.disabledCell.prop === "age"
-              ) {
-                return $index !== 0;
-              }
-              return this.disabledCellProp !== "age";
-            },
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: 20, label: "20" },
-                  { value: 21, label: "21" },
-                  { value: 22, label: "22" },
-                  { value: 23, label: "23" },
-                ],
-              },
-            },
-          },
-          {
-            prop: "city",
-            label: "城市",
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: "北京", label: "北京" },
-                  { value: "上海", label: "上海" },
-                  { value: "广州", label: "广州" },
-                  { value: "深圳", label: "深圳" },
-                ],
-              },
-            },
-          },
-          {
-            prop: "date",
-            label: "日期",
-            form: {
-              comp: {
-                name: "el-date-picker",
-                props: {
-                  type: "date",
-                  placeholder: "选择日期",
-                  format: "yyyy-MM-dd",
-                  valueFormat: "yyyy-MM-dd",
-                },
-              },
-            },
-          },
-        ],
-      };
-    },
-  },
-  methods: {
-    // 控制行编辑状态
-    handleRowChange(index) {
-      this.disabledRowIndex = index;
-      this.$refs.crud.clearAllEdit();
-    },
-
-    // 控制单元格编辑状态
-    handleColumnChange(prop) {
-      this.disabledCellProp = prop;
-      this.$refs.crud.clearAllEdit();
-    },
-    handleCellChange(prop) {
-      if (prop === null) {
-        this.disabledCell = { row: null, prop: null };
-      } else {
-        // 设置第一行的指定列单元格为禁用状态
-        this.disabledCell = { row: 0, prop };
-      }
-      this.$refs.crud.clearAllEdit();
-    },
-  },
-};
-</script>

package/docs/.vuepress/components/crud/tableEdit/dialog.vue

@@ -1,172 +0,0 @@
-<template>
-  <div>
-    <sc-crud
-      :search.sync="searchForm"
-      :options="options"
-      :data="data"
-      @add="add"
-      @edit="edit"
-      @view="view"
-      @save="save"
-    >
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      options: {
-        editConfig: {
-          mode: "dialog",
-          edit: {},
-          add: {
-            addType: "first",
-          },
-          view: {},
-          delete: true,
-          lastAdd: {},
-        },
-        dialog: {}, // 自定义弹窗配置
-        formOptions: {}, // 自定义表单配置
-        renderColumns: [
-          {
-            prop: "name",
-            label: "姓名",
-            form: {},
-          },
-          {
-            prop: "gender",
-            label: "性别",
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: "男", label: "男" },
-                  { value: "女", label: "女" },
-                ],
-              },
-            },
-          },
-          {
-            prop: "age",
-            label: "年龄",
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: 20, label: "20" },
-                  { value: 21, label: "21" },
-                  { value: 22, label: "22" },
-                  { value: 23, label: "23" },
-                ],
-              },
-            },
-          },
-          {
-            prop: "city",
-            label: "城市",
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: "北京", label: "北京" },
-                  { value: "上海", label: "上海" },
-                  { value: "广州", label: "广州" },
-                  { value: "深圳", label: "深圳" },
-                ],
-              },
-            },
-          },
-          {
-            prop: "date",
-            label: "日期",
-            form: {
-              comp: {
-                name: "el-date-picker",
-                props: {
-                  type: "date",
-                  placeholder: "选择日期",
-                  valueFormat: "yyyy-MM-dd",
-                },
-              },
-            },
-          },
-        ],
-      },
-      data: [
-        {
-          id: 1,
-          name: "张三",
-          gender: "男",
-          age: 20,
-          city: "北京",
-          date: "2021-01-01",
-        },
-        {
-          id: 2,
-          name: "李四",
-          gender: "女",
-          age: 21,
-          city: "上海",
-          date: "2021-01-02",
-        },
-        {
-          id: 3,
-          name: "王五",
-          gender: "男",
-          age: 22,
-          city: "广州",
-          date: "2021-01-03",
-        },
-        {
-          id: 4,
-          name: "赵六",
-          gender: "女",
-          age: 23,
-          city: "深圳",
-          date: "2021-01-04",
-        },
-        {
-          id: 5,
-          name: "孙七",
-          gender: "男",
-          age: 24,
-          city: "成都",
-          date: "2021-01-05",
-        },
-        {
-          id: 6,
-          name: "周八",
-          gender: "女",
-          age: 25,
-          city: "重庆",
-          date: "2021-01-06",
-        },
-      ],
-    };
-  },
-  methods: {
-    add(done, scope) {
-      this.$message("点击新增");
-      done();
-    },
-    edit(done, scope) {
-      this.$message("点击编辑");
-      done();
-    },
-    view(done, scope) {
-      this.$message("点击查看");
-      done();
-    },
-    save(done, scope) {
-      setTimeout(() => {
-        done();
-        this.$message("点击保存");
-      }, 500);
-    },
-  },
-};
-</script>

package/docs/.vuepress/components/crud/tableEdit/free.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <sc-crud :search.sync="searchForm" :options="options" :data="data">
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      data: [
-        {
-          id: 1,
-          name: "张三",
-          gender: "男",
-          age: 20,
-          city: "北京",
-          date: "2021-01-01",
-        },
-        {
-          id: 2,
-          name: "李四",
-          gender: "女",
-          age: 21,
-          city: "上海",
-          date: "2021-01-02",
-        },
-        {
-          id: 3,
-          name: "王五",
-          gender: "男",
-          age: 22,
-          city: "广州",
-          date: "2021-01-03",
-        },
-        {
-          id: 4,
-          name: "赵六",
-          gender: "女",
-          age: 23,
-          city: "深圳",
-          date: "2021-01-04",
-        },
-      ],
-      isEdit: true,
-    };
-  },
-  computed: {
-    options() {
-      return {
-        editConfig: {
-          mode: "free",
-        },
-        renderColumns: [
-          { prop: "name", label: "姓名" },
-          {
-            prop: "gender",
-            label: "性别",
-          },
-          {
-            prop: "age",
-            label: "年龄",
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: "1", label: "选项1" },
-                  { value: "2", label: "选项2" },
-                ],
-              },
-            },
-          },
-          {
-            prop: "city",
-            label: "城市",
-          },
-          {
-            prop: "date",
-            label: "日期",
-          },
-        ],
-      };
-    },
-  },
-};
-</script>

package/docs/.vuepress/components/crud/tableEdit/freeColumn.vue

@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <el-button type="primary" @click="isEdit = !isEdit"
-      >切换第三列编辑状态</el-button
-    >
-    <sc-crud :search.sync="searchForm" :options="options" :data="data">
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      data: [
-        {
-          id: 1,
-          name: "张三",
-          gender: "男",
-          age: 20,
-          city: "北京",
-          date: "2021-01-01",
-        },
-        {
-          id: 2,
-          name: "李四",
-          gender: "女",
-          age: 21,
-          city: "上海",
-          date: "2021-01-02",
-        },
-        {
-          id: 3,
-          name: "王五",
-          gender: "男",
-          age: 22,
-          city: "广州",
-          date: "2021-01-03",
-        },
-        {
-          id: 4,
-          name: "赵六",
-          gender: "女",
-          age: 23,
-          city: "深圳",
-          date: "2021-01-04",
-        },
-      ],
-      isEdit: true,
-    };
-  },
-  computed: {
-    options() {
-      return {
-        renderColumns: [
-          { prop: "name", label: "姓名" },
-          {
-            prop: "gender",
-            label: "性别",
-            isEdit: true,
-          },
-          {
-            prop: "age",
-            label: "年龄",
-            isEdit: this.isEdit,
-          },
-          {
-            prop: "city",
-            label: "城市",
-          },
-          {
-            prop: "date",
-            label: "日期",
-            isEdit: true,
-          },
-        ],
-      };
-    },
-  },
-};
-</script>

package/docs/.vuepress/components/crud/tableEdit/methods.vue

@@ -1,154 +0,0 @@
-<template>
-  <div>
-    <div class="demo-section">
-      <h3>方法调用示例：</h3>
-      <el-button @click="setFirstRowEdit">设置第一行编辑</el-button>
-      <el-button @click="setMultiRowEdit">设置多行编辑</el-button>
-      <el-button @click="cancelRowEdit">取消编辑</el-button>
-      <el-button @click="saveRowEdit">保存编辑</el-button>
-    </div>
-
-    <div style="margin-bottom: 20px;">
-      <h3>其他操作：</h3>
-      <el-button @click="addNewRow">新增行</el-button>
-      <el-button @click="addNewRowToFirst">新增至首行</el-button>
-      <el-button @click="clearAllEditStatus">清除所有编辑</el-button>
-      <el-button @click="showEditingStatus">显示编辑状态</el-button>
-    </div>
-
-    <sc-crud
-      :search.sync="searchForm"
-      ref="crud"
-      :options="options"
-      :data="data"
-    >
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      data: [
-        {
-          id: 1,
-          name: "张三",
-          gender: "男",
-          age: 20,
-          city: "北京",
-          date: "2021-01-01",
-        },
-        {
-          id: 2,
-          name: "李四",
-          gender: "女",
-          age: 21,
-          city: "上海",
-          date: "2021-01-02",
-        },
-        {
-          id: 3,
-          name: "王五",
-          gender: "男",
-          age: 22,
-          city: "广州",
-          date: "2021-01-03",
-        },
-      ],
-    };
-  },
-  computed: {
-    options() {
-      return {
-        editConfig: {
-          mode: "row",
-          trigger: "manual",
-          edit: true,
-        },
-        renderColumns: [
-          { prop: "name", label: "姓名" },
-          {
-            prop: "gender",
-            label: "性别",
-            form: {
-              comp: {
-                name: "el-select",
-                options: [
-                  { value: "男", label: "男" },
-                  { value: "女", label: "女" },
-                ],
-              },
-            },
-          },
-          { prop: "age", label: "年龄" },
-          { prop: "city", label: "城市" },
-          { prop: "date", label: "日期" },
-        ],
-      };
-    },
-  },
-  methods: {
-    // 设置第一行进入编辑状态
-    setFirstRowEdit() {
-      const firstRow = this.data[0];
-      this.$refs.crud.setRowEdit(firstRow, {
-        type: "edit",
-        prop: "name", // 聚焦到name列
-      });
-    },
-
-    // 设置多行进入编辑状态
-    setMultiRowEdit() {
-      const rows = this.data.slice(0, 2); // 获取前两行
-      this.$refs.crud.setRowEdit(rows, { type: "edit" });
-    },
-
-    // 取消编辑状态
-    cancelRowEdit() {
-      const editingRows = this.$refs.crud.getEditingRows();
-      this.$refs.crud.setRowEdit(editingRows, { type: "cancel" });
-    },
-
-    // 保存编辑状态
-    saveRowEdit() {
-      const editingRows = this.$refs.crud.getEditingRows();
-      this.$refs.crud.setRowEdit(editingRows, { type: "save" });
-    },
-
-    // 新增行
-    addNewRow() {
-      this.$refs.crud.addRow({
-        name: "新用户",
-        gender: "男",
-        age: 25,
-      });
-    },
-
-    // 在首行新增
-    addNewRowToFirst() {
-      this.$refs.crud.addRow(
-        {
-          name: "新用户",
-          gender: "男",
-          age: 25,
-        },
-        "first"
-      );
-    },
-
-    // 清除所有编辑状态
-    clearAllEditStatus() {
-      this.$refs.crud.clearAllEdit();
-    },
-
-    // 显示编辑状态信息
-    showEditingStatus() {
-      // 获取所有编辑状态的行
-      const editingRows = this.$refs.crud.getEditingRows();
-      console.log("正在编辑的行:", editingRows);
-    },
-  },
-};
-</script>