vue-super-crud 1.7.1 → 1.7.4

package/docs/.vuepress/components/commonConfig/renderType/component.vue

@@ -1,160 +0,0 @@
-<template>
-  <sc-form v-model="form" :options="options"> </sc-form>
-</template>
-
-<script>
-export default {
-  data() {
-    // 非全局组件示例
-    this.CustomComponent = {
-      render: (h) => {
-        return h("div", "自定义组件");
-      },
-    };
-
-    return {
-      options: {
-        renderColumns: [
-          // 1. Select选择器示例
-          {
-            prop: "type",
-            label: "下拉选择",
-            comp: {
-              name: "el-select",
-              multiple: true,
-              // 动态属性配置
-              bind: (scope) => ({
-                disabled: scope.row.status === "disabled",
-              }),
-              // 子组件配置
-              children: [
-                { name: "el-option", label: "类型1", value: "1" },
-                { name: "el-option", label: "类型2", value: "2" },
-              ],
-              // 事件处理
-              on: {
-                change: (val, scope) => {
-                  console.log("选择值:", val);
-                  console.log("当前行:", scope.row);
-                },
-              },
-            },
-          },
-
-          // 2. Input输入框示例
-          {
-            prop: "name",
-            label: "输入框",
-            comp: {
-              name: "el-input",
-              // 直接属性配置
-              clearable: true,
-              maxlength: 20,
-              "show-word-limit": true,
-              // 插槽配置
-              slots: {
-                prefix: () => <i class="el-icon-search" />,
-                suffix: () => <i class="el-icon-date" />,
-              },
-              // 事件监听
-              on: {
-                input: (val, scope) => {
-                  console.log("输入值:", val);
-                },
-                focus: (event, scope) => {
-                  console.log("获得焦点");
-                },
-              },
-            },
-          },
-
-          // 3. Radio单选组示例
-          {
-            prop: "gender",
-            label: "单选组",
-            comp: {
-              name: "el-radio-group",
-              // 动态生成选项
-              children: (scope) => {
-                const options = [
-                  { label: "男", value: "male" },
-                  { label: "女", value: "female" },
-                ];
-                return options.map((item) => ({
-                  name: "el-radio",
-                  label: item.value,
-                  children: item.label,
-                }));
-              },
-              // 组件挂载后的回调
-              mounted: (scope, ref) => {
-                console.log("单选组已挂载:", ref);
-              },
-            },
-          },
-
-          // 4. 自定义组件示例
-          {
-            prop: "custom",
-            label: "自定义组件",
-            comp: {
-              name: this.CustomComponent,
-              // 自定义属性
-              customProp: "自定义值",
-              // 原生事件
-              nativeOn: {
-                click: () => {
-                  console.log("点击自定义组件");
-                },
-              },
-            },
-          },
-
-          // 5. 级联选择器示例
-          {
-            prop: "region",
-            label: "地区选择",
-            comp: {
-              name: "el-cascader",
-              // 属性配置
-              options: [
-                {
-                  value: "zhejiang",
-                  label: "浙江",
-                  children: [
-                    {
-                      value: "hangzhou",
-                      label: "杭州",
-                    },
-                  ],
-                },
-              ],
-              // 条件属性
-              bind: (scope) => ({
-                disabled: !scope.row.type,
-                placeholder: `请选择${scope.item.label}`,
-              }),
-              // 值变化事件
-              on: {
-                change: (value, scope) => {
-                  console.log("选择的地区:", value);
-                },
-              },
-            },
-          },
-        ],
-      },
-      // 表格数据
-      form: {
-        id: 1,
-        type: ["1"],
-        name: "测试数据",
-        gender: "male",
-        custom: "",
-        region: ["zhejiang", "hangzhou"],
-        status: "normal",
-      },
-    };
-  },
-};
-</script>

package/docs/.vuepress/components/commonConfig/renderType/formatter.vue

@@ -1,49 +0,0 @@
-<template>
-  <sc-crud :options="options" :data="data"> </sc-crud>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      options: {
-        renderColumns: [
-          { prop: "name", label: "昵称" },
-          {
-            prop: "username",
-            label: "姓名",
-            formatter: (row) => row.username + " formatter",
-          },
-          {
-            prop: "gender",
-            label: "性别",
-            html: true,
-            formatter: (row) => {
-              return `<span style="color:red">${row.gender}</span>`;
-            },
-          },
-        ],
-      },
-      data: [
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋",
-        },
-      ],
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/docs/.vuepress/components/commonConfig/renderType/render.vue

@@ -1,91 +0,0 @@
-<template>
-  <sc-crud :options="options" :data="data"> </sc-crud>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      options: {
-        pagination: true,
-        action: [
-          {
-            label: "操作",
-            icon: "el-icon-edit",
-            onClick: () => {},
-          },
-        ],
-        renderColumns: [
-          {
-            prop: "name",
-            label: "昵称",
-            render: (h, scope) => {
-              // 安装了jsx相关转换插件可以使用vue-jsx语法
-              return <div>{scope.row.name + "render"}</div>;
-            },
-          },
-          {
-            prop: "username",
-            label: "名称",
-            render: (h, scope) => {
-              // 否则使用h函数渲染
-              return h("div", {}, scope.row.username + "h");
-            },
-          },
-          {
-            prop: "gender",
-            label: "性别",
-            render: (h, scope) => {
-              return (
-                <el-select
-                  v-model={scope.row.gender} // 与v-model相同
-                  onChange={() => {
-                    console.log("change");
-                  }} // 事件加on前缀
-                  clearable // 组件的属性
-                  props={{
-                    // 约等于模板语法的v-bind
-                    multiple: true,
-                  }}
-                  on={{
-                    // 约等于模板语法的v-on
-                    "visible-change": () => {
-                      console.log("visible-change");
-                    },
-                  }}
-                  scopedSlots={{
-                    // 作用域插槽
-                    prefix: () => "prefix",
-                  }}
-                >
-                  <i slot="prefix">具名插槽</i>
-                  <el-option value="111" label="111"></el-option>
-                </el-select>
-              );
-            },
-          },
-        ],
-      },
-      data: [
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋",
-        },
-      ],
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/docs/.vuepress/components/commonConfig/renderType/slot.vue

@@ -1,63 +0,0 @@
-<template>
-  <sc-crud :options="options" :data="data">
-    <!-- 根据prop渲染插槽 -->
-    <template #name="{row}">
-      {{ row.name + "slot" }}
-    </template>
-    <template #username="{row}">
-      {{ row.username + "slot" }}
-    </template>
-  </sc-crud>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      options: {
-        pagination: true,
-        action: [
-          {
-            label: "操作",
-            icon: "el-icon-edit",
-            onClick: () => {},
-          },
-        ],
-        renderColumns: [
-          {
-            prop: "name",
-            label: "昵称",
-          },
-          {
-            prop: "username",
-            label: "名称",
-          },
-          {
-            prop: "gender",
-            label: "性别",
-          },
-        ],
-      },
-      data: [
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋",
-        },
-      ],
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>

package/docs/.vuepress/components/crud/baseUse/baseUse.vue

@@ -1,98 +0,0 @@
-<template>
-  <div>
-    <sc-crud
-      :loading="loading"
-      :search.sync="searchForm"
-      :options="options"
-      :data="data"
-      :total="total"
-      @getList="getList"
-    >
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: false,
-      searchForm: {},
-      options: {
-        init: true,
-        renderColumns: [
-          {
-            prop: "name",
-            label: "昵称",
-            search: true,
-          },
-          {
-            prop: "username",
-            label: "姓名",
-            search: true,
-          },
-          {
-            prop: "gender",
-            label: "性别",
-            search: true,
-          },
-        ],
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    async getList() {
-      this.loading = true;
-      const { data, total } = await this.listApi(this.searchForm);
-      this.loading = false;
-      this.data = data;
-      this.total = total;
-    },
-    listApi() {
-      // 模拟请求api
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve({
-            code: 200,
-            data: [
-              {
-                createTime: "2018-06-02 12:28:47",
-                createUser: 94,
-                id: 56,
-                idNumber: "8",
-                name: "识间华中张认",
-                password: "sed laboris",
-                phone: "18157668675",
-                gender: "男",
-                age: 20,
-                status: 35,
-                updateTime: "2018-09-08 16:33:19",
-                updateUser: 58,
-                username: "石洋",
-              },
-              {
-                createTime: "2018-06-02 12:28:47",
-                createUser: 94,
-                id: 57,
-                idNumber: "8",
-                name: "识间华中张认1",
-                password: "sed laboris",
-                phone: "18157668675",
-                gender: "男",
-                age: 20,
-                status: 35,
-                updateTime: "2018-09-08 16:33:19",
-                updateUser: 58,
-                username: "石洋11",
-              },
-            ],
-            total: 2,
-          });
-        }, 1000);
-      });
-    },
-  },
-};
-</script>

package/docs/.vuepress/components/crud/baseUse/columnAction.vue

@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <sc-crud :search.sync="searchForm" :options="options" :data="data">
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      options: {
-        handleRow: [
-          {
-            label: "操作列隐藏",
-            type: "primary",
-            onClick: () => {
-              this.options.action = false;
-            },
-          },
-        ],
-        action: {
-          width: "auto", // auto: 自动计算宽度
-          calcWidth: 20, // 增加的宽度，默认20
-          handles: [
-            {
-              icon: "el-icon-search",
-              type: "primary",
-              onClick: () => {
-                console.log("search");
-              },
-            },
-          ],
-        },
-        renderColumns: [
-          { prop: "name", label: "昵称", search: true },
-          {
-            prop: "username",
-            label: "姓名",
-            search: {
-              name: "el-date-picker",
-            },
-          },
-          {
-            prop: "gender",
-            label: "性别",
-          },
-        ],
-      },
-      data: [
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋",
-        },
-      ],
-    };
-  },
-  methods: {},
-};
-</script>

package/docs/.vuepress/components/crud/baseUse/columnWidth.vue

@@ -1,107 +0,0 @@
-<template>
-  <div>
-    <sc-crud :search.sync="searchForm" :options="options" :data="data">
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      options: {
-        // 列宽度自动计算规则
-        calcColumnWidth: {
-          widthType: "first", // first为默认值，仅计算第一个有内容的宽度
-          widthFont: "12px Ubuntu", //自定义计算的字体大小和类型(有助于更精确的计算)
-          calcWidth: 20, // 增加的宽度，默认单元格内边距20px
-        },
-        renderColumns: [
-          {
-            prop: "name",
-            width: "auto", // 列自动计算宽度
-            label: "昵称1",
-            search: true,
-          },
-          {
-            prop: "name",
-            width: "auto",
-            calcWidth: 200, // 增加的宽度
-            label: "昵称2",
-            search: true,
-          },
-          {
-            prop: "name",
-            minWidth: "auto", // 列自动计算最小宽度
-            label: "昵称3",
-            search: true,
-          },
-          {
-            prop: "username",
-            label: "姓名",
-            width: "auto",
-            widthType: "max", // 计算所有内容的最大宽度（数据量大存在性能问题），独立设置，覆盖calcColumnWidth
-            widthFont: "12px Ubuntu",
-            search: {
-              name: "el-date-picker",
-            },
-          },
-          {
-            prop: "gender",
-            label: "性别",
-          },
-        ],
-      },
-      data: [
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋ooooooo",
-        },
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认ooooooooooooooo",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋oooooooooooooooo",
-        },
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认oooooooooooooooooooooooooooooooooo",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋312312312______-----ooooooooooooooooooo",
-        },
-      ],
-    };
-  },
-  methods: {},
-};
-</script>

package/docs/.vuepress/components/crud/baseUse/handleRow.vue

@@ -1,65 +0,0 @@
-<template>
-  <div>
-    <sc-crud :search.sync="searchForm" :options="options" :data="data">
-      <template #handleRow-left="{size}">
-        <el-button :size="size">handleRow插槽</el-button>
-      </template>
-    </sc-crud>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      searchForm: {},
-      options: {
-        rowEdit: true,
-        handleRow: {
-          add: {
-            label: "自定义弹窗新增",
-          }, // 自定义弹窗新增按钮
-          batchDelete: {
-            label: "自定义批量删除",
-          }, // 自定义批量删除按钮
-          rowAdd: {
-            label: "定义行新增",
-          }, // 自定义行新增按钮
-        },
-        renderColumns: [
-          { prop: "name", label: "昵称", search: true },
-          {
-            prop: "username",
-            label: "姓名",
-            search: {
-              name: "el-date-picker",
-            },
-          },
-          {
-            prop: "gender",
-            label: "性别",
-          },
-        ],
-      },
-      data: [
-        {
-          createTime: "2018-06-02 12:28:47",
-          createUser: 94,
-          id: 56,
-          idNumber: "8",
-          name: "识间华中张认",
-          password: "sed laboris",
-          phone: "18157668675",
-          gender: "男",
-          age: 20,
-          status: 35,
-          updateTime: "2018-09-08 16:33:19",
-          updateUser: 58,
-          username: "石洋",
-        },
-      ],
-    };
-  },
-  methods: {},
-};
-</script>