element-lowcode-v1 v1.1.1

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 Attributes

表单组件循环列表说明

// 注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

lc-form Event

lc-form 的触发事件

lc-form 内置方法

lc-table Attributes

lc-table Event

lc-table 所触发的事件