vue-super-crud 1.7.1

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

@@ -0,0 +1,160 @@
+<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

@@ -0,0 +1,49 @@
+<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

@@ -0,0 +1,91 @@
+<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

@@ -0,0 +1,63 @@
+<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

@@ -0,0 +1,98 @@
+<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

@@ -0,0 +1,72 @@
+<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

@@ -0,0 +1,107 @@
+<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

@@ -0,0 +1,65 @@
+<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>