1.3.1 • Published 3 years ago
element-tf
Licence
—
Version
1.3.1
Deps
3
Size
296 kB
Vulns
1
Weekly
0
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.基本参数
| 参数 | 类型 | 值 | 说明 |
|---|---|---|---|
| columns | Array | [] | 必填，配置列（详情见下文columns配置） |
| tableData | Array | [] | 必填，表格渲染数据（一般来源于接口） |
| page | Boolean | true/false default：true | 是否需要分页组件 |
| pagenation | Object | defaule:{page:1,pageSize:20} | *如有分页时：分页参数：只支持page和pageSize |
| total | Number | default:0 | *如有分页时：表格总条数 |
| stripe | Boolean | true/false default：false | 是否存在斑马条纹 |
| border | Boolean | true/false default：true | 是否存在列线 |
| index | Boolean | true/false default：true | 是否存在首列序号 |
| selection | Boolean | true/false default：false | 是否存在首列复选框 |
| height | Number | default:300 | 表格高度 |
| paginationPosition | String | left/center/right default:left | 分页器位置 |
3.columns列配置
| 参数 | 类型 | 值 | 说明 |
|---|---|---|---|
| prop | String | 后台字段，例如：userName | 必填 |
| label | String | 对应解析的前端表头，例如：用户名 | 必填 |
| width | Number | 0 | 该字段为最小宽度，等比适配 |
| align | String | left/right/center default:left | 单元格内文本对齐方式 |
| sort | Boolean | true/false default:false | 是否排序 |
| slot | Boolean/String | true/time/status/tag/html | 是否存在插槽（详情见下文） |
| fomart | Function | Function:(value,options) | 过滤器会接受当前单元格中的值value和需要解析的options数组 必须要返回一个值用来展示到单元格内 |
| options | Array | [] | 服务于fomart的解析字典 |
| optionsFn | Function | promise Fn | 该函数是options异步的写法，主要解决当前解析字典为 接口异步时处理办法，存在此项时options无效 options fomart会接受此函数的返回值，一般写法为： optionsFn: async () => {return await getDictionaries("alert");} |
4.slot插槽详解
| 值 | 使用方式 | 说明 |
|---|---|---|
| time | slot:'time' | 当展示的值为时间类型时，可以使用该插槽，会默认在时间前加上时间icon小图标 |
| status | slot:'status' | 当展示的值为状态类型时，可以使用该插槽，会默认在状态前加上代表当前状态的小圆球， 圆球配置：在options数组中：增加class：success/info/primary/warning/danger字段将 显示对应颜色的小圆球，也可增加color:red，编辑具体颜色，color权重将高于class 使用范例：[{label:'高危',value:0,class:'danger'},{label:'中危',value:1,class:'success'}, {label:'低危',value:2,class:'success',color:'green'}] |
| tag | slot:'tag' | 当前值需要使用el-tag标签展示时，可以使用该插槽，该插槽支持字符串数组展示 |
| html | slot:'html' | 当前值需要使用html代码块标签展示时，可以使用该插槽 |
| true | slot:true | 自定义插槽：值设置为true，则在template中使用自定义样式: //sip为当前属性prop值 {{slotData.data.row.sip}} |
5.API事件返回
| 方法名 | 参数 | 说明 |
|---|---|---|
| @header-click | column,event | 点击当前表头事件：column.property可获取当前点击头部prop属性值 |
| @sort-change | sortData | 点击表头排序时：其中会有当前排序字段和排序方式 |
| @pageation-callback | pageation | 分页器发生数据改变时 |
| @select-tabArr | selectArr | 首列复选框数据发生变化时 |
二、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.基本参数
| 参数 | 类型 | 值 | 说明 |
|---|---|---|---|
| formConfig | Array | {} | 必填，form表单项的配置（见下文formConfig表单项配置） |
| size | String | medium / small / mini | 用于控制该表单内组件的尺寸 |
| labelSuffix | String | '' | 表单域标签的后缀，例：':' |
| labelPosition | String | left/center/right default:right | 表单内label位置 |
| labelWidth | String | default:'100px' | 表单内label宽度 |
| footerAlign | String | left/center/right default:right | 表单底部操作按钮的位置，inline模式下无效 |
| reset | Boolean | true/false default:false | 重置按钮是否显示 |
| cancel | Boolean | true/false default:true | 取消按钮是否显示 |
| submit | Boolean | true/false default:true | 确认按钮是否显示 |
| resetConfig | Object | default:{ text:'重置', icon:'el-icon-refresh', type:'warning', size:'default'} |
重置按钮的基本配置 |
| cancelConfig | Object | default:{ text:'取消', icon:'el-icon-close', type:'info', size:'default'} |
取消按钮的基本配置 |
| submitConfig | Object | default:{ text:'保存', icon:'el-icon-plus', type:'primary', size:'default'} |
保存按钮的基本配置 |
| inline | Boolean | true/false default:false | 是否为横向瀑布流（一般常用于表格头部横向搜索） |
3.formConfig表单项配置
| 属性 | 类型 | 值 | 说明 |
|---|---|---|---|
| prop | String | 例：userName | 后台所需字段 |
| label | String | 例：用户名 | 表头label |
| options | Array | [] | 下拉组件数据加载 |
| optionsFn | Function | promise Fn | 一般用于几口返回的下拉数据（填写此项时options将无效） |
| formConfig | Object | Object | 组件项配置（详情见下文formConfig组件项配置） |
4.formConfig组件项配置
| 属性 | 类型 | 值 | 说明 |
|---|---|---|---|
| el | String | 例：el:input | ElementUI中组件名称如el-input使用 |
| value | String/Number/[] | 例：value:'张三' | 表单默认值 |
| width | String | 'px'/'100%' default:'100%' | 表单宽度 |
| valueFn | Function | promise Fn(options) | 该函数将接收一个options下拉数据值（异步也能接收）也必须返回一个值用来使用默认数据，一般常使用return options[0] 来默认选中下拉的第一项数据 |
| rules | Array | [] | 正则校验同element-ui文档 |
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事件返回
| 事件名 | 参数 | 说明 |
|---|---|---|
| @at-info | form | 当默认值数据中包含valueFn时，则会等待异步结束时返回该form 表单的初始值，一般用于表格初始化请求参数中包含异步获取的值 |
| @change-form | prop,value | 当表单元素发生变化时：prop:定义的后台字段，value当前改变后的值 |
| @Cancel | 无 | 取消按钮操作 |
| @reset | form | 重置操作 |
| @Submit | form | 保存按钮触发返回 |