更新记录

1.3.2（2022-05-19）

• fix: fix clearValidate

1.3.1（2022-05-19）

• feat: uvue-form新增clearValidate函数

1.3.0（2022-05-19）

• feat：新增 defaults 属性，用于改变结构配置

平台兼容性

uvue-crud

• 基于 uni-app 和 uview 封装的 crud 组件
• 以配置的方式渲染列表和表单，实现一次配置，多处复用
• 包含 uvue-list 列表组件、uvue-form 表单组件、uvue-form-item 表单项组件、uvue-filter 过滤器组件、uvue-cascader 级联组件
• 示例
• uvue-list 文档
• uvue-form 文档
• uvue-filter 文档
• uvue-cascader 文档

安装

npm/yarn 安装方式

npm i uvue-crud
or
yarn add uvue-crud

下载安装方式

https://ext.dcloud.net.cn/plugin?id=5071

快速上手

引入 uview

由于组件库依赖于 uview，所以需要先引入 uview，安装 uview

注册组件

//main.js
import uvueCrud from "uvue-crud";
Vue.use(uvueCrud);

配置 easycom 规则

// pages.json
{
    "easycom": {
        //下载安装方式
        //"^uvue-(.*)": "@/uvue-crud/components/uvue-$1/uvue-$1.vue",
        //npm安装方式
        "^uvue-(.*)": "uvue-crud/components/uvue-$1/uvue-$1.vue",
    },
    "pages": [
        // ......
    ]
}

示例代码

uvue-list

<template>
  <view>
    <uvue-list :option="option" :data="listData">
      <template #body="{ row }">
        <view>{{ row.content }}</view>
      </template>
      <template #foot="{ row }">
        <view>{{ row.footer }}</view>
      </template>
    </uvue-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        option: {
          formPath: "/pages/form/form"
        },
        data: [
          {
            title: "title1",
            subTitle: new Date().toLocaleDateString(),
            content: "content1",
            footer: "footer1"
          },
          {
            title: "title2",
            subTitle: new Date().toLocaleDateString(),
            content: "content2",
            footer: "footer2"
          }
        ]
      };
    }
  };
</script>

uvue-form

<template>
  <view>
    <uvue-form v-model="formData" :option="formOption" @submit="handleSubmit"></uvue-form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          username: "admin",
          sex: "1"
        },
        formOption: {
          labelWidth: "auto",
          column: [
            {
              label: "用户名",
              prop: "username",
              rules: [{ required: true, message: "请输入用户名", trigger: "change" }]
            },
            {
              label: "性别",
              prop: "sex",
              type: "action",
              dictData: [
                { label: "男", value: "1" },
                { label: "女", value: "0" }
              ]
            }
          ]
        }
      };
    }
  };
</script>