element-tf v1.3.1

element-tf

该ui组件库是element-ui组件库的二次封装，主要是解决繁琐的表格和表单的配置，降低代码冗余度，提升开发效率，摸更多的鱼！

特别提示：使用该组件前请一定先安装element-ui2.15

本插件依赖element-ui所以在安装本组件时会安装element-ui,无需再次安装。

引入方式：

import Vue from "vue";
import App from "./App.vue";

// 全局使用ElementUI 首要前提条件
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

//全局使用ElementTf
import ElementTf from "element-tf";
import "element-tf/dist/css/index.css";
Vue.use(ElementTf);

//按需使用 Table表格 Form表单
import {Table} from "element-tf";
import "element-tf/dist/css/index.css";
Vue.use(Table);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

一、table组件的使用

1.使用方式

<template>
  <div id="app">
    <mg-table :columns="columns" :tableData="tableData"></mg-table>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        //建议将此参数使用js方式导入
        columns: [{
            prop: 'userName',
            label: '姓名'
          },
          {
            prop: 'age',
            label: '年龄',
            slot: 'tag'
          },
          {
            prop: 'role',
            label: '角色',
            slot: 'tag'
          },
          {
            prop: 'remark',
            label: '介绍'
          },
        ],
        tableData: [{
            userName: '张三',
            age: 18,
            role: ['管理员', '检查官'],
            remark: '我是一段自我介绍'
          },
          {
            userName: '李四',
            age: 18,
            role: ['管理员', '检查官'],
            remark: '我是一段自我介绍'
          },
          {
            userName: '王五',
            age: 18,
            role: ['管理员', '检查官'],
            remark: '我是一段自我介绍'
          },
          {
            userName: '赵六',
            age: 18,
            role: ['管理员', '检查官'],
            remark: '我是一段自我介绍'
          },
        ],
      }
    }
  }
</script>

2.基本参数

3.columns列配置

4.slot插槽详解

5.API事件返回

二、form组件的使用

1.使用方式

<template>
  <div id="app">
    <mg-form :formConfig="formConfig"
      @submit="Submit">
    </mg-form>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        //form配置建议使用js方式导入
        formConfig: [{
            prop: 'userName',
            label: '姓名',
            formConfig: {
              el: "input",
              type: "text",
              span: 24,
              value: "",
              placeholder: "请输入",
              clearable: true,
              rules: [{
                required: true,
                message: "该项不能为空",
                trigger: "blur",
              }]
            }
          }, {
            prop: 'age',
            label: '性别',
            options: [{
              label: '男',
              value: 0
            }, {
              label: '女',
              value: 1
            }],
            formConfig: {
              el: "radioGroup",
              span: 12,
              value: 0,
            }
          }, {
            prop: 'role',
            label: '角色',
            options: [{
              label: '管理员',
              value: 'admin'
            }, {
              label: '检查官',
              value: 'prosecutor'
            }],
            formConfig: {
              el: "checkboxGroup",
              span: 12,
              value: ['admin'],
            }
          },
          {
            prop: 'remark',
            label: '介绍',
            formConfig: {
              el: "input",
              span: 24,
              type: 'textarea',
              value: "",
              maxlength: 30
            }
          }
        ]
      }
    },
    methods: {
      Submit(form) {
        console.log(form);
      }
    }
  }
</script>

2.基本参数

3.formConfig表单项配置

4.formConfig组件项配置

5.组件项的使用范围

export default {
  // 1单选按钮
  radioGroup: {
    el: "radioGroup",
    span: 24,
    value: "",
  },

  // 2单选按钮2
  radioGroupButton: {
    el: "radioGroupButton",
    span: 24,
    value: "",
  },

  // 3多选框
  checkboxGroup: {
    el: "checkboxGroup",
    span: 24,
    value: [],
  },

  // 4多选框2
  CheckboxButton: {
    el: "CheckboxButton",
    span: 24,
    value: [],
  },

  // 5文本框
  input: {
    el: "input",
    type: "text",
    span: 24,
    value: "",
    placeholder: "请输入",
    clearable: true,
  },

  // 6数字计数器
  inputNumber: {
    el: "inputNumber",
    span: 24,
    value: "",
    placeholder: "请输入",
  },

  // 7下拉选择
  select: {
    el: "select",
    span: 24,
    value: [],
    placeholder: "请选择",
    filterable: true,
    clearable: true,
  },

  // 8层级选择器
  cascader: {
    el: "cascader",
    span: 24,
    value: "",
    placeholder: "请选择",
    filterable: true,
    clearable: true,
  },

  // 9开关
  switch: {
    el: "switch",
    span: 24,
    value: false,
    // activeText: "是",
    // inactiveText: "否",
  },

  // 10时间选择器
  timeSelect: {
    el: "timeSelect",
    span: 24,
    value: [],
    placeholder: "请选择",
  },

  // 11区间时间选择
  timePicker: {
    el: "timePicker",
    span: 24,
    value: [],
    isRange: true,
    placeholder: "请选择",
  },

  // 12日期时间选择器
  datePicker: {
    el: "datePicker",
    span: 24,
    value: "",
    placeholder: "请选择",
  },

  // 13 Slider 滑块
  slider: {
    el: "slider",
    span: 24,
    value: 0,
    placeholder: "请选择",
  },

  // 14 Rate 评分
  rate: {
    el: "rate",
    span: 24,
    value: 0,
    placeholder: "请选择",
  },

  // 15 autocomplete 自动补全
  autocomplete: {
    el: "autocomplete",
    span: 24,
    clearable: true,
    value: "",
    placeholder: "请输入",
    tipList: ["AND", "OR"],
  },

  // 16 颜色选择器
  colorPicker: {
    el: "colorPicker",
    span: 24,
    value: "",
    showAlpha: true,
    predefineColors: [
      "#ff4500",
      "#ff8c00",
      "#ffd700",
      "#90ee90",
      "#00ced1",
      "#1e90ff",
      "#c71585",
      "rgba(255, 69, 0, 0.68)",
      "rgb(255, 120, 0)",
      "hsv(51, 100, 98)",
      "hsva(120, 40, 94, 0.5)",
      "hsl(181, 100%, 37%)",
      "hsla(209, 100%, 56%, 0.73)",
      "#c7158577",
    ],
    placeholder: "请选择",
  },
};

6.API事件返回