easy-element-ui v1.2.6

easy-element-ui

Author: Shinn

Email: 164888051@qq.com

This package was based on Element-UI.2.5.10

Make sure you understand Element-UI before using it

For easy and fast Html page development, This library refers to the design idea of E-charts Options,

Now, you can use the library by configuring Json parameters, To render your background application page,

And monitor the Change and Click events of each component in real time, Don't worry about component configuration of Element-UI When you develop background level pages in the future, you will often have less than 100 lines of page code, You only need to introduce one component to render the entire page, If the page is long, you can put the prop json object information of the form or table, Put it into a separate js file and import it via import. Easy to adjust layout and modify page elements.

使用前请确认您对 Element-UI 有所了解

并实时监听每个组件的 Change 及 Click 事件, 无需去关心 Element-UI 的组件配置 当你未来开发后台级页面时，往往可让你页面代码不足 100 行， 只需要引入一个组件即可渲染整个页面， 如果页面很长，可以将 form 或 table 的 prop json 对象信息， 放到一个单独的 js 文件，通过 import 引入即可， 方便调整布局，和修改页面元素。

目前已封装进 CommonForm 的组件为:

如果有特殊需求，可配合 slot 组件进行自定义开发,slot 可以嵌套任何组件，理论上满足一切需求，若使用 slot 组件，change 和 click 事件监听需要自己实现

For Update Info

v1.2.6
CommonForm
  所有组件show属性现在可以为函数类型，用于判断是否显示
  date相关组件中的data属性里新增disabledDate:(item, index, time)=>boolean,用于判断日历显示的每一个时间点是否禁止点击,true为禁止,false为可点击
CommonTable
  type=button时
    button新增show，show可以为boolean类型,也可以为(btnItem,tableIndex,tableItem)=>boolean函数类型，用于判断按钮是否显示
    button新增disabled，disabled可以为boolean类型,也可以为(btnItem,tableIndex,tableItem)=>boolean函数类型，用于判断按钮是否禁用
    button删除condition属性

v1.2.5
CommonForm
  select组件添加远程搜索功能

v1.2.4
CommonForm
  修改组件错别字

v1.2.2
CommonForm
  select组件 新增filteralbe auto_create属性

v1.2.1
CommonForm
  每个子组件的id值 不在需要必填，不填时将默认生成随机id

v1.1.9
CommonTable
  prop 补充相关说明文档

v1.1.8
CommonTable
  新增show_overflow_tooltip,用于设置column文字是否单行显示

v1.1.7
CommonTable
  新增empty_text,设置没有数据时显示的提示文字,
  新增fixed,用于固定某个列的位置
  新增sort_method，用于自定义排序方法
  新增resizable，用于控制是否可以手动改变列的宽度
  新增align，设置对齐方式

v1.1.5
CommonTable
  新增column_key,用于配合onFilterChange，监听事件触发对应的列

v1.1.4
CommonTable
  新增table_rate控制table的尺寸大小 medium,small,mini
  新增filters
  新增filter-method
  新增filter-multiple
  新增事件onFilterChange

v1.1.1
CommonForm
  Input组件新增show_password属性，用于显示/隐藏密码

v1.1.0
CommonForm
  新增方法values() =>返回form_prop数组中以value为key的对象，方便操作每一个元素的具体属性,调用方式为this.$refs["common-form"].values()

v1.0.26
CommonForm
  新增组件类型datetime_picker

v1.0.25
CommonForm
  prop新增属性show 控制组件的显示和隐藏

v1.0.24
CommonTableView新增方法
    clearAll() //清除所有已选状态
    refreshTableSelectState() //更新当前页的选中状态

v1.0.21
Select组件 添加multiple,调整data结构，请重新调整Select data数据结构

v1.0.20
CommonTableView 添加 sortable属性，支持默认排序
修复Select组件 options disabled失效的问题

v1.0.19
调整ReadMe document

v1.0.10
所有组件支持自定义Style，
但不是所有Style都会生效，
某些样式仍需要通过::v-deep or /deep/ or >>> 等命令
通过样式穿透强制修改

删除了部分设置，统一都有Style配置

All components support custom Style,
But not all styles work,
Some styles still require the command ::v-deep or /deep/ or >>>
Force changes through style penetration

Deleted some Settings, unified all have the Style configuration

How to use?

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import EasyElementUI from "easy-element-ui"

Vue.use(ElementUI);
Vue.use(EasyElementUI)

CommonForm

changeUploadState(obj); //obj=>{item_id,obj,value}上传组件各状态监听
changeValue(obj); //obj=>{item_id,obj,value}组件中 value 改变的事件
clickButton(obj); //obj=>{item_id,child_id,obj}组件中按钮的点击事件

validate();
values(); //获取form_prop数组以value为key的对象，方便操作对应元素

//example:
this.$refs[your_common_form_ref_name].validate().then((res) => {
  console.log(res); //res is- true or false
});

form_ref_name: {
    //默认form的ref名称
    type: String,
    default: "common-form",
},
form_item_span: {
    //默认一个组件占据的span的大小
    type: Number,
    default: 12,
},
label_position: {
    //form_label的显示位置
    type: String,
    default: "left", //left right top
},
label_end: {
    //form_label的结尾添加字符
    type: String,
    default: "",
},
label_width: {
    //form_label的默认宽度 默认70 可修改
    type: Number,
    default: 70,
},
form_value: {
    //整个页面对应的value，与form_prop一一对应
    type: Object,
    default: () => {},
},
form_prop: {
    //整个页面的组件结构树及参数列表，必填
    type: Array,
    default: [],
}
form_column_style: {
    //自定义Style
    type: Object,
    default: () => {},
}

//数组中的每个对象都是一个组件，最外层属性是所有组件通用的属性，
//data是组件特有的属性
//所有id改为非必填 不填id时将自动生成id
      [
        {
            //输入框 通用属性 Common propertys
            id: 1, //【非】必填 不可重复 可以是任何数据类型 id不存在时 将自动生成id
            label: "name",//form_label_name
            type: "input", //必填
            value: "name", //对应 form_value 里的 key
            place_holder: "",//默认提示文字
            span: 12,//宽度，采用24栅格模式
            offset: 0,//间隔多少格
            show:true,//不传或者true 为显示组件 否则隐藏组件
            show:()=>{//show属性也可以是函数 用于判断是否显示
              /**
               * 判断逻辑
               */
              return true
            },
            label_width: 100,//form_label的宽度
            required: false,//if require=true, then rule will be unused
            rule: [
            //当你配置了rule，require属性将失效
            //配置方法请参考标准化rule配置规则，自行搜索寻找教程
              {
                required:true.
                trigger: "change",
                validator: (rule, value, callback) => {
                  if (value.length == 2) {
                    callback(new Error("error"));
                  } else {
                    callback();
                  }
                },
              },
            ],
            rule_description:"",//require=true时，修改默认错误提示文案
            break: true, //true 代表之后的组件需要另起一行 newline
            style: {
              //自定义style,将作用于组件本身
              border: "1px solid #f00",
              "padding-bottom": "20px",
            },
            form_item_style:{
              //form-item-style,将作用于form_item,也就是form_label+组件
              "margin-bottom": "20px",
              "padding-bottom": "20px",
              border: "1px solid #0f0",
            },

            //data里的所有属性都是，该组件独享属性，后续组件都如此
            data: {
              type: "text",
              show_password:false,//是否显示密码
              autosize: true, //{ minRows: 2, maxRows: 6 }
              pre_icon: "el-icon-search",
              disabled: false,
              max_length: 200, //输入长度
              clearable: false,
              slot_custom_append: true, //自定义组件样式
              slot_custom_prepend: true,
              slot_custom_append_name: "",
              slot_custom_prepend_name: "",

              //如果自定义组件样式，下面属性全部失效
              slot_append: true, //后面添加组件 默认button
              slot_prepend: true, ///前面添加组件 默认button
              slot_append_icon: "el-icon-search",
              slot_append_name: "Search",
              slot_append_style:{},
              slot_prepend_icon: "el-icon-search",
              slot_prepend_name: "Search",
              slot_prepend_style:{},
              press_action: "", //点击事件发起方 append或prepend
          },
        },
        {
          //选择框
          id: 2,
          label: "state",
          value: "state",
          type: "select",
          data: [
            remote_method: //远程搜索方法
            (query) => {
              this.$refs["common-form"].values()["state"].data.list = [
                { id: 1, label: "1", value: "1" },
                { id: 2, label: "2", value: "2" },
                { id: 3, label: "3", value: "3" },
              ];
            },
            remote: true,//是否开启远程搜索
            disabled:false,
            list: [
              { id: 1, label: "true", value: "true" },
              { id: 2, label: "false", value: "false", disabled: false },
            ],
            filterable:true,//是否支持搜索
            allow_create:false,//是否支持创建
            multiple: true,
          ],
        },
        {
          //开关选择器
          id: 3,
          label: "switch",
          value: "switch",
          type: "switch",
          data: {
            disabled: false,
          },
        },
        {
          //按钮
          id: 4,
          type: "button",
          data: [
            {
              id: 1,
              label: "Search",
              type: "primary", //primary danger warning info null
              disabled: false,
              style:{'font-size':'20px'}
            },
            { id: 2, label: "Reset" },
          ],
        },
        {
          //时间范围选择器
          id: 5,
          label: "time",
          value: "datetimerange",
          type: "datetimerange",
          data: {
            start: "Start Time",
            end: "End Time",
            separator: "-",
            disabled: false,
            disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
          },
        },
        {
          //日期范围选择器
          id: 6,
          label: "time",
          value: "daterange",
          type: "daterange",
          data: {
            start: "Start Time",
            end: "End Time",
            separator: "-",
            disabled: false,
            disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
          },
        },
        {
          //日期选择器
          id: 7,
          label: "time",
          value: "date",
          type: "date",
          disabled: false,
          data:{
             disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
          }
        },
        {
          //插槽
          id: 8,
          type: "slot",
          slot_name: "slot1",
          data:{
            //custom value
          }
        },
        {
          //单选-圆钮
          id: 9,
          label: "radio",
          type: "radio",
          data: [
            { id: 1, label: "option 1", value: "1", style: {}, disabled: false },
          ],
        },
        {
          //单选-按钮
          id: 9,
          label: "radiobutton",
          type: "radiobutton",
          data: [
            { id: 1, label: "option 1", value: "1", style: {}, disabled: false },
          ],
        },
        {
          //多选-圆钮
          id: 10,
          label: "checkbox",
          type: "checkbox",
          value:[],
          data: [{ id: 1, label: "option 1", value: "1", disabled: false ,style: {} }],
        },
        {
          //多选-按钮
          id: 11,
          label: "checkboxbutton",
          type: "checkboxbutton",
          value:[],
          data: [{ id: 1, label: "option 1", value: "1", disabled: false,style: {} }],
        },
        {
          //数字选择器
          id: 12,
          type: "number",
          data: {
            disabled: false,
            min: 1,
            max: 10,
            step: 2,
            precision: 3, //小数点 精度
            position: "right", //加减号位置
          },
        },
        {
          //输入框-输入建议
          id: 13,
          label: "auto-complete",
          type: "input-auto-complete",
          data: {
            disabled: false,
            trigger_on_focus: false,
            placement: "top",
            pre_icon: "el-icon-search",
            clearable: false,
            max_length: 10,
            list: [
              { value: "1" },
              { value: "2" },
              { value: "4" },
              { value: "5" },
            ],
          },
        },
        {
          //多层级单/多选框
          id: 14,
          label: "cascader",
          type: "cascader",
          data: {
            clearable: true,
            trigger: "click", //层级展现方式 click|hover
            show_all_levels: true, //是否选中节点显示完整路径
            multiple: true, //是否启动多选
            collapse_tags: false, //是否折叠显示结果
            strict: true, //是否启动单选
            disabled: false,
            list: [
              {
                value: "zhinan",
                label: "指南",
                disabled: true,
                children: [
                  {
                    disabled: true,
                    value: "1",
                    label: "1",
                  },
                  {
                    value: "2",
                    label: "2",
                  },
                ],
              },
            ],
          },
        },
        {
          id: 15,
          type: "slider",
          label: "test",
          value: "test",
          data: {
            disabled: false,
            min: 0,
            max: 100,
            step: 10, //步长
            disabled: false,
            show_tooltip: true, //是否显示提示框
            show_stops: true, //是否显示停顿点
            show_input: false, //是否显示输入框
            vertical: false, //横竖模式
            range: true, //范围模式
            height: 200, //如果是范围模式 此值必填
            marks: {
              0: "0°C",
              8: "8°C",
              37: "37°C",
              50: {
                style: {
                  color: "#1989FA",
                },
                label: this.$createElement("strong", "50%"),
              },
            },
            format_tooltip: (val) => val * 10, //tooltip显示文字的格式化
          },
        },
        {
          //时间选择器(hour:minute:second)
          id:16,
          type: "time",
          label: "Time",
          value: new Date(2022, 11, 22, 18, 0),
          data:{
            disabled: false,
            selectableRange:'00:00:00 - 23:59:59',
          }
        },
        {
          //文本组件
          id:17,
          type: "text",
          label: "text",
          value: "",
        },
        {
          //上传组件
          id:18,
          type:"upload",
          label:"upload",
          data:{
            disabled: false,
            auto_upload:true,
            action:"url",
            multiple:true,
            disabled:false,
            limit:1,
            file_list:""
            button_name:"",
            button_style:{},
            tip:"",
            tip_style:{}
          }
        },
        {
          id:19,
          type: "time_picker",
          label: "time_picker",
          value: "",
          data: {
            disabled: false,
            selectableRange: {
              start: "00:00",
              step: "00:01",
              end: "24:00",
            },
          },
        },
        {
          id:20,
          type: "time_picker_range",
          label: "time_picker_range",
          value: "",
          data: {
            start: "Start Time",
            end: "End Time",
            separator: "-",
            disabled: false,
          },
        },
        {
          id:21,
          type: "datetime_picker",
          label: "datetime_picker",
          value: "",
          data: {
            disabledDate:(item, index, time)=>boolean,//判断日历上的是否可点击,true为禁止点击
            picker_options:{
              //详见element-ui官方文档
            },
            disabled: false,
          },
        },
      ]

<template>
  <CommonForm
      ref="common-form"
      :form_prop="form_prop"
      :form_value="form_value"
      :form_item_span="7"
      label_position="left"
      label_end=":"
  >
  </CommonForm>
</template>

form_value = {
  name: "",
  number: "",
  state: "",
  text: "",
  cascader: "",
  auto: "",
  date: "",
  checkbox: [],
  datetime: [],
  daterange: [],
  radio: "",
  switch: true,
  time: "", //new Date(2022, 11, 22, 18, 0)
}

form_prop: [
  {
    id: 1,
    type: "input",
    label: "Name",
    value: "name",
    label_width: 70,
    required: true,
    form_item_style: {
      "margin-bottom": "20px",
    },
    style: {
      "font-size": "20px",
    },
    data: [
      { id: 1, label: "true", value: "true" },
      { id: 2, label: "false", value: "false" },
    ],
  },
  {
    id: 2,
    type: "select",
    label: "State",
    value: "state",
    required: true,
    offset: 1,
    form_item_style: {
      border: "1px solid #f00",
      "padding-bottom": "20px",
    },

    data: [
        list: [
          { id: 1, label: "true", value: "true" },
          { id: 2, label: "false", value: "false", disabled: false },
        ],
        multiple: true,
    ],
  },
  {
    id: 3,
    type: "button",
    break: true,
    required: true,
    style: {
      position: "relative",
      left: "-20px",
    },
    data: [
      {
        id: 1,
        label: "Search",
        type: "primary",
        style: { "font-weight": "bold" },
      },
      {
        id: 2,
        label: "Reset",
        type: "default",
        style: { color: "#f00" },
      },
    ],
  },
  {
    id: 4,
    type: "datetimerange",
    label: "Alert Time",
    value: "datetime",
    label_width: 100,
    required: true,
    data: {
      separator: "-",
    },
  },
  {
    id: 5,
    type: "time",
    label: "Time",
    value: "time",
    offset: 1,
    required: true,
  },
  {
    id: 8,
    type: "daterange",
    label: "Date Range",
    value: "daterange",
    label_width: 120,
    offset: 1,
    required: true,
    data: {
      separator: "-",
    },
  },
  {
    id: 6,
    type: "text",
    label: "Text",
    style: {
      "font-size": "20px",
    },
    value:
      "This is a paragraph,This is a paragraph,This is a paragraph,This is a paragraph,This is a paragraph,This is a paragraph,",
  },
  {
    id: 7,
    type: "switch",
    label: "switch",
    value: "switch",
    offset: 1,
    required: true,
  },
  {
    id: 9,
    type: "date",
    label: "date",
    value: "date",
    offset: 1,
    required: true,
  },
  {
    id: 10,
    label: "radio",
    type: "radio",
    value: "radio",
    offset: 1,
    required: true,
    data: [
      {
        id: 1,
        label: "option 1",
        value: "1",
        style: {},
      },
      {
        id: 2,
        label: "option 2",
        value: "2",
        style: {},
      },
    ],
  },
  {
    id: 11,
    label: "checkbox",
    type: "checkbox",
    value: "checkbox",
    offset: 1,
    label_width: 100,
    required: true,
    break: true,
    data: [
      {
        id: 1,
        label: "option 1",
        value: "1",
        disabled: false,
        style: {},
      },
      {
        id: 2,
        label: "option 2",
        value: "2",
        disabled: false,
        style: {},
      },
    ],
  },
  {
    id: 12,
    type: "number",
    value: "number",
    required: true,
    label: "number",
    data: {
      min: 1,
      max: 10,
      step: 2,
      precision: 3, //小数点 精度
      position: "right", //加减号位置
    },
  },
  {
    id: 13,
    label: "auto-complete",
    type: "input-auto-complete",
    value: "auto",
    label_width: 150,
    offset: 1,
    required: true,
    data: {
      disabled: false,
      trigger_on_focus: false,
      placement: "top",
      pre_icon: "el-icon-search",
      clearable: false,
      max_length: 10,
      list: [
        { value: "1" },
        { value: "2" },
        { value: "4" },
        { value: "5" },
      ],
    },
  },
  {
    //多层级单/多选框
    id: 14,
    label: "cascader",
    type: "cascader",
    value: "cascader",
    offset: 1,
    required: true,
    label_width: 100,
    data: {
      clearable: true,
      trigger: "click", //层级展现方式 click|hover
      show_all_levels: true, //是否选中节点显示完整路径
      multiple: true, //是否启动多选
      collapse_tags: false, //是否折叠显示结果
      strict: true, //是否启动单选
      disabled: false,
      list: [
        {
          value: "zhinan",
          label: "指南",
          disabled: true,
          children: [
            {
              disabled: true,
              value: "1",
              label: "1",
            },
            {
              value: "2",
              label: "2",
            },
          ],
        },
      ],
    },
  },
],

CommonTableView

onClickButton(obj); //obj->{id,row} 按钮点击事件监听
onPageChange(v); //页面切换事件
onFilterChange(obj); //筛选菜单事件监听
onRowClick(obj); //某一行被点击的事件

init(array); //set select values
clearAll(); //清除所有已选状态
setCurrentRow(row); //设置table的单选状态，不传row则取消当前高亮选中
refreshTableSelectState(); //更新当前页的选中状态

    table_page: {
      //当前页码
      type: Number,
      default: 1,
    },
    table_size: {
      //每页条数
      type: Number,
      default: 10,
    },
    table_total: {
      //总条数
      type: Number,
      default: 0,
    },
    empty_text: {
      type: String,
      default: "",
    },
    page_button_count: {
      //翻页组件 最多显示几个页码按钮
      type: Number,
      default: 7, //center left right
    },
    page_position: {
      //翻页组件的显示位置
      type: String,
      default: "center", //center left right
    },
    show_page: {
      //是否显示page组件
      type: Boolean,
      default: false,
    },
    table_highlight_current_row: {
      //是否高亮当前行
      type: Boolean,
      default: false,
    },
    key_name: {
      //多选，收集的值 对应list里的key
      type: String,
      default: "id",
    },
    table_select_list: {
      //默认选择数据 内容需与key_name的值对应 用于自动更新
      type: Array,
      default: [],
    },

    table_rate: {
      //表格的尺寸大小
      type: String,
      default: "medium",
    },

    table_ref_name: {
      //默认table的ref名称
      type: String,
      default: "base-common-table",
    },
    table_max_height: {
      //最大高度 默认auto
      type: String,
      default: "auto",
    },

    table_stripe: {
      //是否显示stripe
      type: Boolean,
      default: true,
    },
    table_border: {
      //是否显示Tableview的边框
      type: Boolean,
      default: true,
    },

    table_list: {
      //list数据
      type: Array,
      default: [],
    },
    table_prop: {
      //table渲染list
      type: Array,
      default: [],
    },

{
    id: 1,
    label: "Operation",//form_label_name
    type: "button",//button select text slot 4种组件类型 一般设置属性只对text和slot生效
    min_width:200,
    width:200,
    sortable:false,//是否开启排序
    resizable:true,//是否可以拖动列的宽度
    column_key:"test",//一般这个值配合filter相关功能使用
    fixed:"left",//	true, left, right
    align:"",//left/center/right
    show_overflow_tooltip:false,//文字过多时，显示tooltip
    slot_name: "slot1",//if you want to use slot, please set its name 如果使用了type=slot 需要设置slot_name 区分column
    filters: [ //当前列 弹出的筛选菜单数组
            { text: "2016-05-01", value: "2016-05-01" },
            { text: "2016-05-02", value: "2016-05-02" },
            { text: "2016-05-03", value: "2016-05-03" },
            { text: "2016-05-04", value: "2016-05-04" },
    ],
    filterMultiple: false, //是否支持多选
    filterHandler: (value, row, column) => {
      //选中后 的处理逻辑
      return true;
    },
    sort_method:(a,b)=>{
      return true
    },
    data: {
      style: {
        //单元格Style样式
        "font-size": "14px",
        "margin-right": "10px",
      },
      list: [
        //type=button，设置按钮及其样式
        {
          id: 1,
          label: "Manager",
          font_size: "14px",
          show:true,//是否显示
          show:(btnItem,tableIndex,tableItem)=>{//是否显示
            return true;
          },
          disabled:true,//是否禁用
          disabled:(btnItem,tableIndex,tableItem)=>{//是否禁用
            return true;
          },
          style: {},
        },
        { id: 2, label: "Ignore" },
        { id: 3, label: "Delete", type: "delete" },
      ],
    }
}

<template>
  <CommonTableView
        ref="common-table"
        style="margin-top: 20px"
        :table_prop="table_prop"
        :table_list="table_list"
        :table_select_list.sync="table_select_list"
        :table_page="table_page"
        :table_total="table_total"
        :table_size="table_size"
        :show_page="true"
      >
      <template v-slot:slot1="scope">
        <div>{{ scope }}</div>
      </template>
      <template v-slot:slot2="scope">
        <div>{{ scope }}</div>
      </template>
  </CommonTableView>
</template>

table_page: 1,
table_size:10,
table_total: 0,
table_select_list: [],
table_list: [
    { id: 1, name: "name", test: "a" },
    { id: 2, name: "name", test: "dfdffdf" },
    { id: 3, name: "name", test: "<font color='#ff0000'>tecst</font>" },
    {
    id: 4,
    name: "name",
    test: "123",
    },
],
table_prop: [
    { id: 0, type: "select" },
    { id: 1, prop: "test", label: "Alert Time" },
    { id: 2, prop: "test", label: "Alert Content", min_width: 200 },
    { id: 3, prop: "test", label: "Level" },
    { id: 4, prop: "test", label: "Device Ip" },
    { id: 5, prop: "name", label: "Project" },
    { id: 6, prop: "test", label: "Group" },
    {
      id: 7,
      prop: "test",
      label: "Type",
      type: "slot",
      slot_name: "slot2",
    },
    {
      id: 8,
      prop: "test",
      label: "Log File",
      type: "slot",
      slot_name: "slot1",
    },
    {
      id: 9,
      label: "Operation",
      type: "button",
      width: 190,
      data: {
        style: {
          "font-size": "14px",
          "margin-right": "10px",
        },
        list: [
          {
            id: 1,
            label: "Manager",
            style: {
              color: "#ff0000",
            },
          },
          { id: 2, label: "Ignore" },
          { id: 3, label: "Delete" },
        ],
      },
    }
],

Other Methods

setLang("cn") //cn中文 en英文
setLog(true or false) // show Log