❤
npm
Sign UpSign In

element-lowcode-v1

1.1.1 • Public • Published

element-lowcode-v1

本项目主要是为了节约开发人员重复的书写form表单和table表格代码的时间而开发的一套针对Element-ui for vue2 的低代码组件

项目依赖：

​ 1.element-ui@vue2官网： https://element.eleme.cn/ ​ 2.moment官网： http://momentjs.cn/

Project setup

npm install -S element-lowcode-v1

UseAge

// main.js:
import Vue from "vue";
import App from "./App.vue";
// 引入Element-ui
import ElementUI from "element-ui";
// 引入 element-lowcode-v1插件
import EleLowcode from "element-lowcode-v1";
Vue.use(ElementUI);
Vue.use(EleLowcode);
// 引入element-ui css 样式
import "element-ui/lib/theme-chalk/index.css";
// 引入 element-lowcode-v1 css 样式
import 'element-lowcode-v1/lib/element-lowcode-v1.css'

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");
<!-- .vue文件 -->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div class="" style="max-width:600px;margin:0 auto;">
      <!-- form -->
      <h1>lc-form</h1>
      <lc-form :list-data="listData" :form-data="formData" @btns="btns"></lc-form>
      <hr />
      <h1>lc-form-group</h1>
      <!-- form-group -->
      <lc-form-group :list-data="listDataGroup" :form-data="formData" @btns="btns" :group-style="{ background: '#ccc',marginTop:'10px'}"></lc-form-group>
      <hr />
    </div>
    <!-- table -->
    <h1>lc-table</h1>
    <div style="width:60vw;margin:0 auto;">
      <lc-table :options="tableOptions" :mobile-width="768" ></lc-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      listData: [{ prop: "test", label: "测试" }],
      listDataGroup: [
        {
          title: "标题1",
          list: [{ prop: "test", label: "测试" }],
        },
        {
          title: "标题2",
          list: [{ prop: "test2", label: "测试2" }],
        },
      ],
      formData: { test: "" },
      formRules: {},
      btns: [],
      tableOptions: {
        title: "测试表格",
        column: [
          {
            prop: "date",
            label: "日期",
            align: "center",
            width: "100",
          },
          {
            prop: "name",
            label: "名字",
            align: "center",
            width: "100",
          },
          {
            prop: "province",
            label: "省份",
            align: "center",
            width: "100",
          },
          {
            prop: "city",
            label: "市区",
            align: "center",
            width: "100",
          },
          {
            prop: "address",
            label: "地址",
            align: "center",
          },
          {
            prop: "zip",
            label: "邮编",
            align: "center",
          },
        ],
        list: [],
      },
      windowWidth:1024
    };
  },
  created(){
    this.getData()
  },
  methods: {
    getData: function () {
      this.isloading = true
      const loading = this.$loading({
        title: "加载中",
      });
      setTimeout(() => {
        this.isloading = false;
        loading.close()
        this.tableOptions.list = [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1517 弄",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1519 弄",
            zip: 200333,
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1516 弄",
            zip: 200333,
          },
        ];
      }, 1000);
    },
  },
};
</script>

参数

lc-form Attributes

参数 说明 类型 是否必须 可选值 默认值
listData 表单字段循环JSON列表，想见下方listData说明 Array 是
formData 表单:mode绑定值同el-form的:mode Object 是
formRules 表单验证规则，同el-from的rules Object 否
btns 表单的自定义按钮级事件数据详见下方btns说明 Array 否 []
labelWidth 同el-form的labelWidth Number/String 否 80px
size 同el-form的size String 否 medium / small / mini mini
inline 是否行内表单，同el-form（一般搜索模块设置true） Boolean 否 true / false true
limit 上传控件文件数量通用限制同el-upload的limit Number 否 1
disabled 同el-form Boolean 否 true / false false
showPlaceholder 是否展示placeholder Boolean 否 true / false true
remoteLoading 远程搜索loading状态同el-select Boolean 否 true / false false
showImgs Boolean 否
mobileWidth 切换为手机样式的宽度临界值 String / Number 否 768

listData Attributes

表单组件循环列表说明

参数 说明 类型 是否必须 可选值 默认值
type form-item组件类型 String 是 详见说明 text
prop form表单绑定数据的字段 String 是
label form表单字段的label String 否
width el-form-item的lable宽度，权重高于外层labelWidth String 否
itemWidth el-form-item除lable外区域的宽度 String 否 100%
noAll 是否不展示全部选项，当type是radio或checkbox 时有效 Boolean
renderVal 当type的值是radio / checkbox / select 的时候需要渲染控件上的选择项，详见renderVal说明 Array
valueFormat el-date-picker组件的格式化 String 否 yyyy-MM-dd HH:mm:ss / yyyy-MM-dd
momentFormat moment插件中的格式化配置 String 否 YYYY-MM-DD HH:mm:ss
required 同el-form-item 的 required属性
showIf 条件字段，是否开启此控件根据条件展示或者隐藏 Boolean 否 false
valIf 条件字段展示所需判断的值（如果valIf的值与表单绑定数据中propIf字段值相等则展示否则隐藏该组件）注1
propIf 条件字段展示所需判断的字段（如果valIf的值与表单绑定数据中propIf字段值相等则展示否则隐藏该组件）注1
valOr 或条件字段，必须要先有valIf和showIf 满足if条件之后或者再满足valOr的值与绑定数据中propIf字段值相等则展示否则隐藏该组件 注2 Any
options el-cascader的options属性
props el-cascader的props属性
showAllLevels el-cascader的show-all-levels属性 Boolean 否 true / false false
max input限制输入最大字符数量 Number 否 -
widthBtn 同一个form-item是否同时展示一个btn Boolean 否 true / false false
btnEvent widthBtn的button点击自定义事件如传入testEvent则在组件外使用@testEvent="EventFunc"接收事件 String 否
btnText widthBtn 的button按钮文字 String 否
showImgs type为image-upload时有效，值为需要展示出来的文件列表，需要用户自己传入数据类型为：{prop:fileList,prop2:flieList2} Object 否
action 同el-upload中的action
limit 同el-upload中的limit 权重高于组件prop中的limit Number 否 1
accept 同el-upload中的accept 
// 注1:
if(valIf == forms[propIf]) {
  // 展示组件
}else{
  // 隐藏组件
}
// 注2:
if(valIf == forms[propIf] || valOr == forms[propIf]){
  // 展示组件
}else{
  // 隐藏组件
}

说明：type可选值为 text / textarea / number / txt / img / daterange / datetimerange / monthrange / date /datetime / radio / checkbox / select / image-upload / tree-select

  1. text / textarea / number 分别对应el-input的type类型
  2. / daterange / datetimerange / monthrange / date /datetime 分别对应 el-date-picker类型
  3. radio和checkbox 分别对应 el-radio-group 和 el-checkbox-group
  4. select 对应 el-select
  5. tree-select 对应 el-cascader
  6. image-upload 对应 el-upload组件
  7. txt则输出span 文本

renderVal Attributes

参数 说明 类型 是否必填 可选值 默认值
label 循环列表绑定的值，与原组件保持一致 Any 是
title 循环列表展示的标题 String 是
disabled 是否禁用 Boolean 否 true / false false

lc-form Event

lc-form 的触发事件

事件名 说明 类型 参数
#propEvent 自定义btn中的event 传入的事件名称，点击button会触发抛出此事件组件外部需要使用@propEvent（注：prop-event只是一个名称，无特殊含义） function forms
radio-change radio绑定值变化时触发的事件 function value,prop
check-change checkbox绑定值变化时触发的事件 function
image-change 同el-upload中的on-change事件 function
upload 自定义上传方法，需要用户自己处理上传事件同el-upload中的http-request function
remove 移除已上传/选择的文件时触发 function
on-remote el-select远程搜索查询触发事件 function
select-change 下拉选中事件 function
submit 默认按钮提交事件 function formrs
cancel 默认按钮 取消事件 function forms

lc-form 内置方法

方法名 说明 类型 参数
onSubmit 表单规则校验方法 Promise
onReset 表单字段重置方法 Promise
setRemoteOptions 远程搜索结果列表设置方法 Promise prop,options

lc-table Attributes

参数 说明 类型 是否必填 可选值 默认值
options Object
mobileWidth 展示手机样式所需要宽度的临界值 String/Number 否 768px
showSelect 是否显示多选 Boolean 是 true / false true
page el-pagination的page属性用法相同,当前页数，支持 .sync 修饰符 Number - 1
pageSize el-pagination的pageSize属性用法相同,每页显示条目个数，支持 .sync 修饰符 Number - 10
pageSizes el-pagination的pageSizes属性用法相同,每页显示个数选择器的选项设置 Array - [10, 20, 30, 40, 50, 100]
total el-pagination的total属性用法相同,总条目数 Number - -
hideOnePage 只有一页数据时是否展示分页 Boolean 否 true / false false

lc-table Event

lc-table 所触发的事件

事件名 说明 参数
size-change pageSize 改变时会触发 pageSize
page-change page 改变时会触发 page
current-change page或pageSize改变都会触发的事件（用于统一处理） pageSize/page,size-chagne/page-change
selection-change 当选择项发生变化时会触发该事件 selectIndex

Readme

Keywords

Package Sidebar

Install

npm i element-lowcode-v1

Weekly Downloads

1

Version

1.1.1

License

MIT

Unpacked Size

6.37 MB

Total Files

32

Last publish

Collaborators

  • amos007
Try on RunKit
Report malware