vue-super-crud 1.7.1

package/docs/.vuepress/components/crud/renderType/1.vue

@@ -0,0 +1,57 @@
+<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: "昵称" },
+          {
+            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/crud/renderType/2.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/renderType/3.vue

@@ -0,0 +1,105 @@
+<template>
+  <sc-crud :options="options" :data="data"> </sc-crud>
+</template>
+
+<script>
+export default {
+  data() {
+    this.scopeComp = {
+      render: (h) => {
+        return h("div", "非全局组件");
+      },
+    };
+    return {
+      options: {
+        renderColumns: [
+          {
+            prop: "username",
+            label: "名称",
+            comp: {
+              // 组件内部通常要有一个value值，用来接收表格的默认值
+              name: "el-select", // 组件名称，全局组件才能使用
+              clearable: true, // 组件的属性
+              multiple: true,
+              children: [
+                // 组件的子级，接收comp数组、comp单个对象、渲染函数、默认插槽内容
+                {
+                  name: "el-option",
+                  value: "111",
+                  label: "111",
+                },
+                {
+                  name: "el-option",
+                  value: "222",
+                  label: "222",
+                },
+              ],
+              on: {
+                // 组件的事件
+                change: (val, scope) => {
+                  this.$message.success(val);
+                  // scope 包含 el表格原有参数与当前组件实例
+                  console.log(scope, "表格参数");
+                },
+              },
+            },
+          },
+          {
+            prop: "name",
+            label: "昵称",
+            comp: {
+              name: "el-input",
+              slots: {
+                // 使用插槽
+                prefix: (h) => {
+                  return "prefix";
+                },
+              },
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            comp: {
+              name: "el-button",
+              on: {
+                // 组件的事件
+                click: () => {
+                  this.$message.success("点击了按钮");
+                },
+              },
+              children: "组件渲染",
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            comp: {
+              name: this.scopeComp, // 非全局组件使用：将引入的组件直接传给name
+            },
+          },
+        ],
+      },
+      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/renderType/5.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/crud/search/1.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div style="margin-bottom: 15px;">queryForm:：{{ searchForm }}</div>
+    <sc-crud
+      :search.sync="searchForm"
+      :options="options"
+      :data="data"
+      @search="handleSearch"
+      @reset="handleReset"
+    >
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索的表单对象，
+      searchForm: {
+        name: "defaultName", //仅第一次搜索默认值，重置后清除
+      },
+      options: {
+        searchForm: true, //是否显示搜索表单
+        searchHeader: true, // 是否显示表格搜索头
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              reset: () => {
+                console.log("重置事件");
+              },
+              comp: {
+                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: {
+    /**
+     * 搜索触发。
+     * @param {Function} done - 回调函数，完成时调用
+     */
+    handleSearch(done) {
+      setTimeout(() => {
+        done();
+      }, 1000);
+    },
+    /**
+     * 重置触发。
+     * @param {Function} done - 回调函数，完成时调用
+     * @param {Object} prop - 单个重置的列属性名。
+     */
+    handleReset(done, prop) {
+      console.log(prop, "handleReset");
+      setTimeout(() => {
+        done();
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/docs/.vuepress/components/crud/search/2.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div style="margin-bottom: 15px;">queryForm:：{{ searchForm }}</div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+      <!-- 插槽 自定义搜索标题 -->
+      <template slot="name-search-label">
+        <div>插槽自定义label</div>
+      </template>
+      <template slot="name-search">
+        <div>插槽自定义搜索内容</div>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        name: "defaultName",
+        sexCustom: [],
+      },
+      options: {
+        searchForm: true,
+        searchHeader: true,
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "username",
+            label: "姓名",
+            search: {
+              comp: {
+                name: "el-select",
+              },
+              labelRender: () => {
+                // jsx 自定义搜索标题
+                return <div>jsx label</div>;
+              },
+            },
+          },
+          {
+            prop: "gender",
+            label: "性别",
+            search: {
+              prop: "sexCustom", //自定义search取值字段
+              label: "自定义搜索标题", //自定义search标题
+              comp: {
+                name: "el-date-picker",
+              },
+            },
+          },
+        ],
+      },
+      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>
+
+<style lang="scss" scoped></style>

package/docs/.vuepress/components/crud/search/3.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div style="margin-bottom: 15px;">queryForm:：{{ searchForm }}</div>
+    <sc-crud :search.sync="searchForm" :options="options" :data="data">
+      <!-- 自定义搜索头插槽 -->
+      <template #gender-searchHeader>
+        <div>自定义搜索头插槽</div>
+      </template>
+    </sc-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        customProp: "",
+      },
+      options: {
+        // 搜索表单配置
+        searchForm: {
+          // .... 其余属性同form表单
+          initShow: true, // 初始化是否展开搜索框
+          columnWidth: "400px", // 搜索框每列宽度
+          labelWidth: "150px", // 搜索框label宽度
+          action: {
+            search: {
+              // 自定义搜索按钮
+              label: "自定义搜索",
+              icon: "el-icon-magic-stick",
+            },
+            reset: {
+              label: "自定义重置",
+            },
+            handles: [
+              // 添加自定义按钮
+              {
+                label: "自定义按钮",
+                icon: "el-icon-magic-stick",
+                onClick: () => {
+                  this.$message.success("自定义按钮");
+                },
+              },
+            ],
+          },
+        },
+        // 搜索头配置
+        searchHeader: {
+          // ...其余属性与el-popover组件配置相同
+          width: "100px", // 搜索头宽度
+        },
+        renderColumns: [
+          { prop: "name", label: "昵称", search: true },
+          {
+            prop: "updateTime",
+            label: "自定义搜索头组件",
+            searchHeader: {
+              // 单个搜索头配置 与searchHeader相同
+              width: "400px",
+              // 自定义搜索头组件，覆盖继承自search的组件
+              comp: {
+                name: "el-select",
+              },
+            },
+            search: {
+              comp: {
+                name: "el-date-picker",
+                type: "daterange",
+                rangeSeparator: "-",
+                startPlaceholder: "开始日期",
+                endPlaceholder: "结束日期",
+                valueFormat: "yyyy-MM-dd",
+              },
+            },
+          },
+          {
+            prop: "gender",
+            label: "自定义搜索头插槽",
+            search: {},
+          },
+        ],
+      },
+      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>
+
+<style lang="scss" scoped></style>