vue-gyc-ui
Version:
``` npm i element-ui npm i vue-gyc-ui ```
1,362 lines • 68.4 kB
Markdown
### 动态表格+表单组件+TREE
### 安装
```
npm i element-ui
npm i vue-gyc-ui
```
### main.js 代码
```javascript
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import vueGycUi from "vue-gyc-ui";
Vue.use(ElementUI, { size: "medium" }).use(vueGycUi,{
globleBtnStyle: {
size: "medium", type: 'primary', plain: false, round: false, circle: false, plain: true, icon: undefined
},
btnStyle: {
save: { size: 'small', icon: 'el-icon-ss' },
read: { type: 'text', plain: false },
edit: { type: 'text', plain: false },
del: { type: 'text', plain: false, style: 'color:red;' },
cancel: { text: '关闭' }
},
//=================FORM=======================
//FORM 底部按钮对齐方式letf|center|right
formFooterAlign: () => "center",
//FORM 项标题分散对齐
formLabelJustify: () => false,
//FORM 显示验证错误消息
showErrMessage: () => true,
//================TABLE=======================
//TABLE 上下查询风格或左右查询风格
queryH: true,
//TABLE 分页条显示位置letf|center|right|flex-end|flex-start
page_align: () => 'flex-end',
//TABLE 查询标题分散对齐
queryLabelJustify: () => false,
//TABLE 查询标题宽度
queryLabelWidth: () => 55,
//TABLE 查询输入宽度
queryInputWidth: () => 160,
//TABLE 表格右侧操作按钮显示位置letf|center|right|flex-end|flex-start
controlAlign: () => 'center',
//TABLE 表格列默认宽度 默认120px
dWidth: () => '120px',
//TABLE 列设置宽度
setWidth: () => '578px',
});
```
---
###### 示例
```html
<template>
<div style="display: flex; width: 100%; height: 100%">
<!--列表显示数据-->
<div style="display: flex; width: 100%; height: 100%">
<div style="display: flex; width: 100%; height: 100%">
<div
style="
display: flex;
padding: 10px;
margin: 10px;
width: 150px;
overflow: auto;
height: calc(100vh - 40px);
"
>
<g-tree
style="height: 100%; overflow: auto; display: flex"
@delete="(a, b) => b(true)"
:load="loadDataById"
:props="defaultProps"
nodeKey="cbid"
@add-next="treeAdd"
@update="treeUpdate"
:tree-columns="tree_col"
@saveData="treeSaveData"
></g-tree>
</div>
<div style="display: flex; flex: 1">
<g-table
ref="tb"
style="width: 99.9%"
:tableAttrs="tdata"
fixedHeight="calc(100vh - 115px)"
@add="add"
@load="load"
@edit="edit"
@del="del"
@dbclick="dbRowClick"
@read="read"
:row-style="tableRowClassName"
:row-class-name="bb"
:page_align="()=>'center'"
:queryInfo="queryInfo"
:queryH="true"
:disFuncs="['setting', 'more1', 'batch']"
:leftWidth="250"
suffix="ok"
:queryLabel="true"
:justify="()=>true"
:sort="{ column: 'retailsale', order: 'asc' }"
@row-click="rowClick"
:queryInputWidth="()=>150"
:sumData="sumData"
:set-width="()=>'600px'"
:row_Drop="true"
:editTable="false"
:show-message="false"
@row-drop="drop"
@select="tbselect"
@select-all="tbselect"
@batch-handle="batchHandle"
@row-save="rowSave"
@qx="
(item, callback) => {
callback({
read: () => true, //这里控制表格行查看功能
edit: () => true, //这里控制表格行编辑功能
del: () => item, //这里控制表格行删除功能
save: () => true,
});
}
"
:pagesizeList="[10, 50, 100]"
>
<!-- :btnsWidth="390" -->
<!-- :disFuncs="['query','edit', 'del', 'read', 'page', 'control'，'more']" -->
<div slot="imgurl">这里可以替换表格显示内容</div>
<!-- <el-button type="danger" slot="del" @click="del">delete</el-button> -->
<div slot="lbtn">
<el-button type="text" style="margin-right: 2px">左边</el-button>
</div>
<div slot="rbtn">
<el-button type="text">右边</el-button>
</div>
<!-- <div slot="page">这里可以重写分页条</div> -->
<div
slot="addright"
style="display: inline-flex; flex-wrap: wrap; margin-right: 10px"
>
<el-button type="success" @click="test">测试表单</el-button>
</div>
<!-- <div slot="querydata" style="display: flex; flex: 1">222</div> -->
<!-- <div slot="query">这里重写查询事件</div>
<div slot="add">这里重写增加事件</div> -->
<!-- <div slot="edit" slot-scope="scope" v-if="scope.info.amountxs == 0">
{{ scope.name }}
</div> -->
<div slot="query-age-dict" slot-scope="data">{{ data.info }}</div>
<div slot="query-company-autocomplete" slot-scope="data">
{{ data.info.value }}
</div>
<!-- <div slot="header-retailsale">333</div> -->
<div slot="query-java-customize" slot-scope="data">
<el-input
v-model="data.info.val"
:placeholder="data.info.remark"
></el-input>
</div>
<!-- <div slot="setting">222</div> -->
<div slot="more1">更多筛选</div>
<div slot="goodstags" slot-scope="data">
{{ data.info }}
</div>
<!-- <div slot="g-table">重写表格</div> -->
<div slot="header-fl2" style="display: inline-flex">77</div>
<div slot="fl2" style="display: inline-flex">88</div>
<div
slot="batch"
slot-scope="data"
style="display: inline-flex; margin-right: 10px"
>
<el-button type="primary">{{
"批量" + data.info.length
}}</el-button>
</div>
<!-- <div slot="line-edit">444</div> -->
</g-table>
</div>
</div>
</div>
<!--增加form表单-->
<g-add-form
:isModel="true"
:is="isshow"
:fullscreen="false"
:formAttrs="currdata"
:formInfo="formInfo"
:showFooter="true"
@saveData="saveData"
@close="isshow = undefined"
:commitText="()=>'save'"
:cancelText="()=>'exit'"
:showCommitBtn="showCommitBtn"
:showCancelBtn="true"
center="center"
@toDoChange="toDoChange"
:border="false"
:showErrMessage="()=>true"
:justify="()=>true"
>
<!-- <div slot="add-title">这里可以替换title</div> -->
<!-- <div slot="add-footer">这里可以替换footer</div> -->
<!-- <div slot="label-goodsname" slot-scope="data">
<div>{{ data.info.title }}</div>
</div> -->
<div slot="arrgoodstags" slot-scope="scope">
<el-input
:style="`margin-right:1px;width: ${
(188 - scope.info.arrgoodstags.length) /
scope.info.arrgoodstags.length
}px;`"
v-for="(item, index) in scope.info.arrgoodstags"
:key="index"
v-model="scope.info.arrgoodstags[index]"
>
</el-input>
</div>
<!-- <div slot="goodsname" slot-scope="data">
<el-input style="width: 188px" v-model="data.info.goodsname"></el-input>
</div> -->
<!-- <div slot="spareRBtn" style="display: inline-flex; margin-left: 300px">
<el-button>右边增加备用按钮</el-button>
</div> -->
<div slot="auto-autocomplete" slot-scope="scope">{{ scope.info }}</div>
<div slot="sex-dict" slot-scope="scope">
<div>性别：{{ scope.info }}</div>
</div>
<div slot="bj1">
<div style="width: 655px; margin: 0px -54px 0 -10px; display: flex">
<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
</div>
</div>
<div slot="bj2">
<div
:style="`width: 710px;margin: 0px -104px 0 -30px;display: flex;align-items: center;padding-left: 50px;`"
>
<span>雨纷纷</span>
<el-divider direction="vertical"></el-divider>
<span>旧故里</span>
<el-divider direction="vertical"></el-divider>
<span>草木深</span>
</div>
</div>
<div slot="upload-upload">上传</div>
<div slot="upload-upload-tip">上传提示信息</div>
</g-add-form>
</div>
</template>
```
```javascript
<script>
import dayjs from "dayjs";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
currdata: {},
showCommitBtn: true,
formInfo: undefined,
isshow: undefined,
formAttrs: {
username: {
title: "姓名",
val: "刘麻子",
required: true,
width: 202,
trigger: "change",
//regular: "[A-Z0-9]{2,5}",
validate: (a, form) => {
console.log(form);
return a.length !== 4;
},
},
age: {
title: "年龄",
val: 18,
number: true,
width: 202,
max: 100,
min: 16,
trigger: "change",
},
company: { title: "公司", val: "", max: 10, width: 202 },
sex: {
title: "性别",
val: "0",
dicts: [
{ label: "男", value: "1" },
{ label: "女", value: "0" },
],
change: (a, b) => {
console.log(a);
console.log(b);
},
query: (words, callback) => {
callback([
{ label: "男", value: "1" },
{ label: "女", value: "0" },
]);
},
},
date: {
title: "日期",
val: "",
required: true,
date: true,
options: {
disabledDate(time) {
return time.getTime() > Date.now() + 12 * 3600 * 7;
},
shortcuts: [
{
text: "一年后",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() + 12);
picker.$emit("pick", date);
},
},
{
text: "半年后",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() + 6);
picker.$emit("pick", date);
},
},
{
text: "一月后",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() + 1);
picker.$emit("pick", date);
},
},
{
text: "一周后",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
picker.$emit("pick", date);
},
},
{
text: "今天",
onClick(picker) {
picker.$emit("pick", new Date());
},
},
{
text: "昨天",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", date);
},
},
{
text: "一周前",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", date);
},
},
{
text: "一月前",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() - 1);
picker.$emit("pick", date);
},
},
{
text: "三月前",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() - 3);
picker.$emit("pick", date);
},
},
{
text: "半年",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() - 6);
picker.$emit("pick", date);
},
},
{
text: "一年前",
onClick(picker) {
const date = new Date();
date.setMonth(date.getMonth() - 12);
picker.$emit("pick", date);
},
},
],
},
//time: true,
change: (data) => {
console.log(data);
},
},
time: {
title: "时间",
required: true,
val: "",
time: true,
date: true,
change: (data) => {
console.log(data);
},
},
leval: {
title: "等级",
required: true,
val: 3,
radio: [1, 2, 3],
labels: ["大", "中", "小"],
change: (data) => {
console.log(data);
},
},
bj1: { bj: true, itemLabelWidth: 0 },
hobby: {
title: "爱好",
val: [10],
checkbox: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
labels: [
"乒乓球",
"跑步",
"吃鱼",
"打球",
"开车",
"看书",
"打游戏",
"上网",
"cosplay",
"movie",
],
width: 624,
change: (data) => {
console.log(data);
},
},
remark: { title: "备注", val: "", area: true, width: 624, max: 200 },
bj2: { bj: true, itemLabelWidth: 0 },
email: {
title: "邮箱",
val: "myemail@qq.com",
email: true,
required: true,
width: 624,
},
auto: {
title: "自动加载",
val: "",
autocomplete: true,
triggerOnFocus: false,
popperAppendToBody: true,
valueKey: "name",
input: (a, form) => {
console.log(a, form);
},
fetch_suggestions: (querystr, back) => {
back([{ name: "222" }, { name: "333" }]);
},
auto_select: (a, b) => {
alert(2);
console.log(a, b);
},
width: 624,
},
switch: {
title: "开关",
switch: true,
val: 1,
// trueColor: "red",
// falseColor: "blue",
activeValue: 1,
switchWidth: 100,
change: (data) => {
console.log(data);
},
},
upload: {
title: "上传",
val: "",
upload: true,
fileList: [],
action: "https://jsonplaceholder.typicode.com/posts/",
listType: "picture",
},
},
tdata: {
goodsid: {
title: "配件ID",
val: 0,
number: true,
//visible: false,
type: "selection",
},
goodstags: {
title: "标签",
val: "",
// col_width: 150,
suffix: true, // "el-icon-edit",
prefix: "$",
password: false,
disable: true,
// alwaysShow: true,
num: -100,
tooltip: true,
click: (data) => {
alert("hello world!");
},
},
amount: {
alwaysShow: true,
num: 11,
title: "数量",
required: true,
filterClass: "arrgoodstags",
editTable: true,
required: true,
val: undefined,
placeholder: "输入数字",
number: true,
// regular: "\\d+",
tooltip: true,
prefix: "￥",
col_width: 120,
required: true,
trigger: "blur",
//suffix: "<B style='color:red;'>元</B>",
click: (data) => {
//todo()
},
change: (data) => {
console.log(data);
},
input: (a, b) => {
console.log(a, b);
},
},
biaoji: {
title: "标记",
sortable: false,
visible: false,
filterClass: "arrgoodstags",
children: [
{ key: "fl1", title: "标记一", val: 1 },
{
key: "fl2",
title: "标记二",
val: "5555",
number: true,
html: (b, a) => {
return "<div style='color:red'>098</div>";
},
// autocomplete: true,
// valueKey: "name",
// fetch_suggestions: (querystr, back) => {
// back([{ name: "222" }, { name: "333" }]);
// },
// auto_select: (a, b) => {
// alert(1);
// console.log(a, b);
// },
width: 624,
},
],
},
wareid: {
title: "配件编号",
val: 0,
num: 8,
number: true,
visible: false,
edit: false,
},
// arrgoodstags: {
// title: "TB标签",
// val: ["", "", ""],
// sortable: false,
// filterClass: "arrgoodstags",
// num: -101,
// editTable: true,
// },
retailsale: {
title: "成功价",
val: 0,
number: true,
range: [1, 10],
col_width: 120,
sortable: false,
//suffix: "$",
decimals: 2,
editTable: true,
clearable: true,
required: true,
},
goodsname: {
title: "配件名称",
val: "555",
tooltip: true,
//visible: false,
// num: 2,
// max: 5,
editTable: true,
col_width: 200,
formart: "6666",
style: (a, b, c) => {
return c % 2 == 0
? { color: "red", background: "blue", padding: "10px" }
: "";
},
range: [4, 30],
change: (a) => {
console.log(a);
},
},
imgurl: { title: "图片路径", val: "mall/00ef4g", tooltip: true },
sale: {
title: "销售价",
val: 865.0,
number: true,
// decimals: 2,
// suffix: "$",
prefix: "￥",
editTable: true,
change: (v) => {
console.log(v);
},
},
amountxs: {
title: "销售数量",
val: 20,
number: true,
editTable: true,
placeholder: "20-60之间",
// range: [20, 60],
col_width: 120,
//regular: "[2-5]\\d",
suffix: "$",
},
statetag: {
title: "状态",
val: 1,
tooltip: true,
dicts: [{ label: "禁用", value: 0 }],
},
jbstr: {
title: "角标",
val: "",
width: 624,
placeholder: "请输入a",
clearable: true,
// regular: "[a]",
required: true,
editTable: true,
},
remark: {
title: "备注",
val: "Thermo King 。",
tooltip: true,
area: true,
width: 624,
num: 10000,
max: 200,
},
},
queryInfo: {
vis: {
val: "99",
remark: "888",
label: "测试",
inVisible: true,
},
test: {
val: "",
remark: "测试查询",
clearable: true,
label: "测试查询",
more: true,
//labelWidth: 400,
//width: 300,
},
username: {
val: "",
remark: "请输入姓名",
label: "请输入姓名",
date: true,
//width: 1000,
more: true,
//labelWidth: 400,
},
age: {
val: 0,
remark: "年龄查询",
label: "年龄查询",
dicts: [
{ label: "男", value: 0 },
{ label: "女", value: 1 },
],
query: (a, b) => {
b([
{ label: "男", value: 0 },
{ label: "女", value: 1 },
]);
},
change: (form, item) => {
console.log(form);
console.log(item);
},
},
maxdate: {
val: "",
remark: "开始时间",
label: "开始时间",
clearable: true,
date: true,
more: true,
dateOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [
{
text: "今天",
onClick(picker) {
picker.$emit("pick", new Date());
},
},
{
text: "昨天",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", date);
},
},
{
text: "一周前",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", date);
},
},
],
},
change: (a) => {
console.log(a);
},
},
mindate: {
val: "",
remark: "结束时间",
label: "结束时间",
clearable: true,
date: true,
more: true,
},
timespan: {
keys: ["atime", "atime1"],
vals: [new Date(), new Date()],
remark: "时间段查询",
label: "时间段查询",
clearable: true,
daterange: true,
more: true,
width: 240,
change: (a, b) => {
console.log(a, b);
},
},
bs: {
keys: ["btime", "btime1"],
vals: ["", ""],
remark: "时间段查询",
label: "时间段查询",
clearable: true,
daterange: true,
more: false,
width: 240,
change: (val) => {
console.log(val);
},
},
company: {
key: "company",
val: "",
remark: "自动查询",
label: "自动查询",
//valueKey: "value",
autocomplete: true,
fetch_suggestions: (a, b) => {
b([{ value: 122 }]);
},
auto_select: (iten) => {
alert(iten);
},
},
java: {
val: "",
remark: "定制",
label: "定制",
customize: true,
more: true,
},
},
sumData: { amount: 0, goodstags: "合计" },
defaultProps: {
label: "cbname",
children: "list",
isLeaf: (data) => {
return data.lastnode == 1;
},
},
tree_col: [
{ key: "superior", title: "上级" },
{ key: "itemName", title: "名称" },
],
selectRow: [],
};
},
methods: {
rowSave(row, index, back) {
console.log(row, index);
back(4);
},
batchHandle(data) {
console.log(data);
},
tbselect(selection) {
console.log(selection);
},
drop({ oldIndex, newIndex }) {
console.log({ oldIndex, newIndex });
},
treeAdd(node, data) {
this.tree_col[0].edit = true;
data.superior = node.cbname;
},
treeUpdate(node, data) {
this.tree_col[0].edit = false;
data.itemName = node.cbname;
},
treeSaveData(data, back) {
back(true);
},
async loadDataById(node, resolve) {
if (node.level == 0) {
return resolve([
{
pcbid: 0,
cbid: 0,
cbname: "所有品牌",
lastnode: 0,
id: 0,
},
]);
} else {
return resolve([
{
cbname: "长安",
pcbid: 0,
cbid: 100,
noused: 0,
lastnode: 0,
fullname: "长安",
},
{
cbname: "比亚迪",
pcbid: 0,
cbid: 101,
noused: 0,
lastnode: 0,
fullname: "比亚迪",
},
{
cbname: "哈弗",
pcbid: 0,
cbid: 191,
noused: 0,
lastnode: 0,
fullname: "哈弗",
},
{
cbname: "日产",
pcbid: 0,
cbid: 211,
noused: 0,
lastnode: 0,
fullname: "日产",
},
{
cbname: "奥迪",
pcbid: 0,
cbid: 225,
noused: 0,
lastnode: 0,
fullname: "奥迪",
},
{
cbname: "奔驰",
pcbid: 0,
cbid: 302,
noused: 0,
lastnode: 0,
fullname: "奔驰",
},
]);
}
},
tableRowClassName({ row, rowIndex }) {
let styleRes = {
// background: "red !important",
};
return styleRes;
},
bb() {
//return "bb";
return "";
},
rowClick(row, column, event) {
// console.log(row);
// console.log(column);
// console.log(event);
},
toDoChange(data) {
if (data.ov.sale !== undefined && data.nv.sale != data.ov.sale) {
// console.log(data.nv.sale + "---" + data.ov.sale);
}
},
dbRowClick(a, b, c, d) {
d(true);
alert("dbclick default ok");
},
//测试表单
test() {
this.currdata = this.formAttrs;
this.formInfo = undefined;
this.isshow = "g-add-form";
},
//初始数据
async load(obj, callback) {
obj.pagesize = 5;
let { list, total } = demoData.data;
let page = parseInt(obj.page);
console.log(obj.page, obj.pagesize);
callback(list.filter((a, index) => index > (page - 1) * 10 && index < (page * 10)), total, (a, b) => a.goodsid == b.goodsid);
this.sumData = {
amount: 1022200,
goodstags: "合计",
remark: "合计备注",
remark1: "合计备注",
retailsale: 3000,
};
},
//增加
add() {
this.formInfo = undefined;
this.currdata = this.tdata;
this.showCommitBtn = true;
this.isshow = "g-add-form";
},
//删除
del(data, callback) {
alert("ok");
callback(true);
//callback("删除失败了");
},
//编辑
edit(data) {
let dict = this.tdata.statetag.dicts;
dict.dicts = [{ label: "禁用", value: 1 }];
dict.val = data.statetag;
this.currdata = this.tdata;
this.showCommitBtn = true;
this.formInfo = data;
this.isshow = "g-add-form";
},
//查看详情
read(data) {
this.currdata = this.tdata;
this.showCommitBtn = false;
this.formInfo = data;
this.isshow = "g-add-form";
},
//保存数据
saveData(data, callback) {
//alert("保存成功，请在这里处理数据保存！");
// callback(false);
// this.isshow = undefined;
},
},
mounted() {
//this.$refs.ttb.get_data_list(1, { aa: "55" });
},
};
</script>
```
---
#### 表单参数列表
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| :------------- | :------------------------------------------------------------------------ | :------: | :--------------------------------------: | :---------------- |
| isModel | 是否弹窗 | Boolean | true | true,false |
| fullscreen | 全屏 | Boolean | false | --- |
| title | 表单标题 | String | 新增 | String |
| formAttrs | 表单项属性（详情见表单项参数列表） | Object | {} | --- |
| formInfo | 编辑实体 | Object | {} | --- |
| width | 表单宽度 | Number | 720 | --- |
| isreadonly | 是否禁用表单 | Boolean | false | --- |
| center | 底部操作按钮是否居中 | Function | center | center,left,right |
| commitText | 提交按钮文本 | Function | 提交 | --- |
| cancelText | 取消按钮文本 | Function | 取消 | --- |
| showCommitBtn | 是否显示提交按钮 | Boolean | true | --- |
| showCancelBtn | 是否显示取消按钮 | Boolean | true | --- |
| showFooter | 是否显示底部操作按钮 | Boolean | true | --- |
| itemWidth | 表单项宽度 | Number | 308 | --- |
| labelWidth | 表单项标题宽度 | Number | 120 | --- |
| border | 表单表格是否显示边框 | Boolean | false | true,false |
| showErrMessage | 是否显示验证错误信息 | Function | false | true,false |
| justify | 表单label是否分散对齐 | Function | false | true,false |
| btnType | 设置表单操作列按钮类型 例如 {commit:{type:'info'},cancel:{type:'danger'}} | Object | primary-success-warning-danger-info-text | ['text'] |
#### 表单项参数列表
| 参数 | 说明 | 类型 | 默认值 |
| :----------------: | :--------------------------------------------------------------------------------------------------- | :--------------------------- | :--------: |
| key | 表单项绑定值 key (formAttrs.key值)，后面所有项是value值 如：model:{key:'key1',{title:'t1',val:'v1'}} | String | --- |
| title | 表单项标题 | String | --- |
| val | 表单项的值 | any | any |
| change | 表单项值改变触发事件 | Function(data)参数是表单数据 | undefined |
| ------- | 表单项默认类型是 text 类型,input 输入框 | ----- | ---- |
| width | 表单项宽度 | Number | undefined |
| labelWidth | lable 宽度 | Number | 100 |
| edit | 表单项设置 false 则不显示编辑项 | Boolean | undefined |
| disable | 表单项是否禁用状态 | Number | undefined |
| number | 数字输入框 | Boolean | undefined |
| password | 文本输入框有效，设置后变成密码框 | Boolean | undefined |
| prefix | 文本输入框或数字输入框的前缀 | String | undefined |
| suffix | 文本输入框或数字输入框的后缀，如果设置为 true，显示默认的三个点 | Boolean,String | undefined |
| click | suffix 单击后缀执行事件 | Function(data)参数是表单数据 | undefined |
| date | 日期输入框 | Boolean | undefined |
| time | 时间输入框 date:true,time:true | Boolean | undefined |
| dateOptions | 时间日期选择器特有的选项 通过一个方法返回一个对象 | Function(form) | {} |
| dicts | 选择框初始值。格式[{label:title,value:val}] | Array | [] |
| query | 选择框查询方法,执行 callBack 方法赋值给 dicts | Function(words,callBack) | undefined |
| defaultEmpty | 默认设空值，否则默认为第一项 | true,false,undefined | undefined |
| area | 多行方本框 | Boolean | undefined |
| radio | 单选框 | Array | [] |
| checkbox | 多选框 | Array | [] |
| labels | 单选框和多选框有效，显示单选框和多选框字段，和 values 数组长度等长 | Array | [] |
| switch | 开关 | Boolean | undefined |
| trueColor | 开关有效,选中时背景色 | String | #13ce66 |
| falseColor | 开关有效,未选中时背景色 | String | #ff4949` |
| switchWidth | 开关有效,开关长度 | number | --- |
| autocomplete | 输入建议框 | Boolean | undefined |
| fetch_suggestions | 建议框有效，callback([])返回建议数组 | Function(words,callback) | undefined |
| auto_select | 建议框有效，处理数选中后操作 | Function(item,items) | undefined |
| valueKey | 建议框有效，输入建议对象中用于显示的键名 | string | value |
| popperClass | Autocomplete 下拉列表的类名 | string | ----- | ---- |
| triggerOnFocus | 是否在输入框 focus 时显示建议列表 | Boolean | true,false | true |
| popperAppendToBody | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | Boolean | true,false | true |
| bj | 标记项，可以设置分割线，ui 其他标记 | Boolean | undefined |
| upload | 文件上传，参数详见 element-ui-upload 文档 | true | undefined |
| goAdd | 选择框搜索为空时定义方法 | Function(form,item) | undefined |
#### 表单 Events
| 事件名称 | 说明 | 回调参数 |
| :------: | :------------------- | :------------ |
| saveData | 保存表单数据 | form 对象数据 |
| close | 关闭表单窗体执行事件 | --- |
---
#### validate 验证
| 校验规则 | 说明 | 值 |
| :------: | :------------------------- | :------------------------------------------------------------------------------------------------------- |
| required | 不能为空 | true,false |
| email | 邮箱格式 | true,false |
| url | 网址 | true,false |
| len | 字符串长度 | number |
| range | 数字范围 | anrry 例如：[10,20] 数字类型验证范围，字符串验证长度范围 |
| max | 字符串最大长度或数字最大值 | number |
| min | 数字最小值 | number |
| regular | 正则表达式 | string 例如：'[a-z]' |
| validate | 自定义验证 | function(val,form){return true} 返回 true（验证通过） 或 false（验证未通过，默认消息）或string(错误消息) |
#### 表单自定义验证示例
```javascript
formAttrs: [
{
key: "name",
title: "姓名",
val: "",
required: true, //必填
//自定义验证
validate: (val)=>{ return true}
},
},
{ key: "age", title: "年龄", val: "18", number: true }, //数字
{ key: "company", title: "公司", val: "", max: 10 }, //最大长度
{
key: "url",
title: "日期",
val: "",
date: true, //日期
width: 650,
},
];
```
#### 表单 slot 重写
#### 表单项各项都可以用插槽重写，slot name=item.key
```html
<g-add-form :formAttrs="currdata" :height="180">
<div slot="name">这里可以放任何HTML</div>
<div slot="age">这里替换编辑控件</div>
</g-add-form>
```
| name | 说明 |
| :-------------------: | :--------------------- |
| item.key | 重写表单项 |
| label-item.key | 重写表单项 label |
| add-title | 重写弹窗标题 |
| add-footer | 重写弹窗 footer |
| item.key-dict | 重写 Select 控件显示项 |
| item.key-autocomplete | 重写建议框显示项 |
| item.key-upload | 重写上传点击按钮 |
| item.key-upload-tip | 重写上传提示文本 |
| spareLBtn | 在提交和取消前面增加UI |
| spareRBtn | 在提交和取消后面增加UI |
---
#### 表格参数列表
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----------------: | ------------------------------------------------------------------------------------- | :------: | ----------------------------------------------------- | ---------- |
| tableAttrs | 表格 column 属性数组（见表格 column 属性） | Object | {} | [] |
| height | 计算表格高度 100vh-height=table 的高度 | Number | ---() | 100 |
| fixedHeight | 表格固定高度 | string | px % vh calc | undefined |
| btnsWidth | 表格行操作按钮宽度 | Number | --- | 185 |
| sort | 排序对象{key:参数名,value:排序方式(字段名 asc,desc)} | Object | undefined --- | --- |
| page_align | 分页条显示方式 | Function | left ,center, right | center |
| disFuncs | 过滤表格功能[操作，编辑，删除，查看，分页，表头，查询，更多] | Array | [control,edit, del,read,page,setting,query,core] | undefined |
| suffix | 表名后缀，一个页面多个表格时需要增加 | String | --- | --- |
| btnType | 设置表格操作列按钮类型 例如 {add:{type:'info'},edit:{type:'danger'}} | Object | primary / success / warning / danger / info / text | ['text'] |
| row_Drop | 行拖拽 | Boolean | true,false | false |
| queryInfo | 表格检索对象数组，项属性见后面检索项文档 | Array | --- --- | --- |
| queryH | 是否横向生成检索框组，否则纵向生成检索框组 | Number | --- | 200 |
| leftWidth | 左侧查询宽度 竖形查询时有效 | Boolean | true,false --- | --- |
| queryLabel | 是否显示查询 label | Boolean | true,false --- | true |
| queryLabelWidth | 查询 label 宽度 | Function | --- | 0 |
| queryInputWidth | 查询输入框宽度 | Function | --- | 0 |
| justify | 查询标题分散对齐 | Function | undefined --- | --- |
| popoverWidth | 查询弹窗宽度 | String | 150px | --- |
| popoverOffset | 查询弹窗偏移量 | Number | --- | --- |
| sumData | 合计 格式：{key:val} | Object | --- | undefined |
| rowStyle | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function | Function({row, rowIndex})/Object | --- |
| rowClassName | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function | Function({row, rowIndex})/String | --- |
| cellStyle | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function | Function({row, column, rowIndex, columnIndex})/Object | --- |
| cellClassName | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function | Function({row, column, rowIndex, columnIndex})/String | --- |
| pagesizeList | pagesize list | Array | [5, 10, 15, 20, 50, 100] | --- |
| batchName | 批量处理按钮文字 | String | ---- | '批量处理' |
| editTable | 开启表格编辑 | Boolean | ---- | false |
| show-message | 表格编辑时，是否显示验证错误消息 | Boolean | ---- | false |
| set-width | 设置列宽度 | Function | --- | 516px |
| control-align | 操作列样式，对齐方式， | Function | --- | --- |
| d-width | 表格默认列宽， | Function | --- | 120px |
| horizontalShowBtns | 是否横向显示查询按钮和操作按钮 | Boolean | true,false | false |
#### 表格 column 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :---------: | ---------------------------------------------------------------------------------------------------------- | :-------------: | ---------------------- | ---------- |
| key | 表单项绑定值 key (tableAttrs.key值)，后面所有项是value值 如：tableAttrs:{key:'key1',{title:'t1',val:'v1'}} | String | --- |
| title | 对应列显示的标题 | String | --- | --- |
| val | 对应列值 | any | --- | --- |
| type | selection 显示多选框；index 显示该行的索引；expand 显示为一个可展开的按钮 | String | selection/index/expand | --- |
| col_width | 列宽度 | String | --- | 100px |
| align | 列显示方式 | String | left ,center, right | center |
| sortable | 列排序 | Boolean | true,false,undefined | undefined |
| tooltip | 当内容过长被隐藏时显示 | Boolean | true,false,undefined | undefined |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | --- |
| visible | 设置为 false 则此项不显示在表格中 | boolean | true,false,undefined | undefined |
| labelWidth | 表格项标题宽度 | Number | | undefined |
| headerAlign | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | Number | | ---- |
| format | 时间格式化 | string | | dayjs 格式 |
| prefix | 前缀 | string | ---- | ----- |
| suffix | 后缀 | string | ---- | ----- |
| decimals | 小数位数 | Number | number | 0 |
| pad | decimals时，是否用0填充小数位数 | Boolean | true,false | true |
| style | 样式 style(value,row,index) | function | --- | --- |
| html | 自定义 html(value,row,index) | function | --- | --- |
| alwaysShow | 表格设置时永远显示 | Boolean | true,false | --- |
| editTable | 编辑模式 | Boolean | true,false | --- |
| clearable | 编辑模式下可清空输入 | Boolean | true,false | --- |
#### 表格 检索项 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----------------: | ---------------------------------------------------------------------------------- | :-------------: | -------------------- | -------- |
| key | 检索 key,传入后台的参数名称 | String 或 Array | --- | --- |
| val | 检索值,传入后台的参数值 | String 或 Array | --- | --- |
| remark | 标识检索项名称 | String | --- | --- |
| label | label 文本 | String | --- | --- |
| labelWidth | label 文本长度 | Number | --- | 100 |
| inVisible | 不显示，只传参数 | Boolean | true,false | undefend |
| more | 生成更多查询,要在表格属性disFuncs中开启more | boolean | true,false | --- |
| date | 生成时间检索框 | Boolean | true,false,undefined | --- |
| daterange | 生成时间段检索框 [key1,key2] [val1,val2] | Boolean | true,false,undefined | --- |
| dicts | 生成选择检索框初始对象数组 | Array | --- | --- |
| query | 选择检索框的数据源 | function | words,callback | --- |
| daterange | 生成时间段检索框 key 为数组，val 为数组[key1,key2],[val1,val2] | String | --- | --- |
| autocomplete | 生成建议检索框 | Boolean | true,false,undefined | --- |
| valueKey | 建议框有效，输入建议对象中用于显示的键名 | string | value |
| fetch_suggestions | 获取建议检索框数据源 | Function | words,callback | --- |
| auto_select | 建议检索框项选中处理事件 | Function | item,itmes | --- |
| popperClass | Autocomplete 下拉列表的类名 | string | ----- | ---- |
| triggerOnFocus | 是否在输入框 focus 时显示建议列表 | Boolean | true,false | true |
| popperAppendToBody | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | Boolean | true,false | true |
| customize | 生成自定义元素，重写自定义检索项 query-item.key-customize | Boolean | true,false | true |
#### 表格检索项重写 Slot
| name | 说明 |
| :-------------------------: | :------------------- |
| query-item.key-dict | 重写选择检索框项显示 |
| query-item.key-autocomplete | 重写建议框项显示 |
| query-item.key-customize | 自定义检索项 |
#### Table Events
| 事件名 | 说明 | 参数 |
| :--------------: | -------------------------------------------- | :-------------------------------------------------------------------------------------------- |
| load | 加载表格数据 | {page,pagesize},callBack(list,total) |
| add | 新增 | ----- |
| edit | 编辑 | rowData,callBack |
| del | 删除 | rowData,callBack |
| read | 查看详情 | rowData |
| dbclick | 行双击事件 | row，column |
| qx | 设置表格操作编辑，删除，查看，保存权限 | item,callback 两个参数，参数 item 传入表格项,callback 返回{edit=>true,del=>true,read=>true} |
| row-click | 当某一行被点击时会触发该事件 | row, column, event |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| batch-handle | 表格多选事件 | selectedRows |
| row-save | 表格行编辑保存 | row,index,callback callback传入一个参数true,则处理回调，不传或非true则弹出默认保存消息提示 |
#### Table Slot 表单 column 各项都可以用插槽重写，slot name=item.key
```html
<g-table :tableAttrs="tdata" :height="180" :page_align="()=>'flex-end'">
<div slot="imgurl">这里重写column 显示</div>
<!-- <el-button type="danger" slot="del" @click="del">重写del</el-button> -->
<div slot="lbtn">
<el-button type="warning" style="margin-right: 2px"
>这里在左边增加功能</el-button
>
</div>
<div slot="rbtn">
<el-button type="info">这里在右边增加功能</el-button>
</div>
<div slot="page">这里可以重写分页ui</div>
</g-table>
```
| name | 说明 |
| :-------------: | :----------------------- |
| g-table | 重写表格 |
| item.key | 重写表格 column |
| header-item.key | 重写表格 column 标题 |
| add | 重写增加功能 |
| addleft | 在新增左边增加功能 |
| addright | 在新增右边增加功能 |
| query | 重写查询功能 |
| read | 重写查看详情功能 |
| edit | 重写编辑功能 |
| del | 重写删除功能 |
| lbtn | 在操作按钮组左边增加功能 |
| rbtn | 在操作按钮组右边增加功能 |
| page | 重写分页条 |
| setting | 重写表头设置 |
| more | 重写更多查询 |
| more1 | 重写更多查询（弹层样式） |
| batch | 批量操作 |
---
#### tree attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :------------------: | ---------------------------------------------------- | :---------------------: | ------ | ------ |
| treeData | 展示数据 | array | --- | --- |
| iconClass | 自定义树节点的图标 | string | --- | --- |
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | --- | false |
| nodeKey | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | --- | --- |
| indent | 相邻级节点间的水平缩进，单位为像素 | number | --- | 20 |
| load | 加载子树数据的方法，仅当 lazy 属性为true 时生效 | function(node, resolve) | --- | --- |
| props | 配置选项 | object | --- | --- |
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点， | boolean | --- | true |
| check-on-click-node | 是否在点击节点的时候选中节点 | boolean | --- | false |
| add-form-width | 增加或修改节点弹窗宽度 | number | --- | 410 |
| tree-columns | 增加节点或修改节点实体属性（见表格项属性） | Object | --- | --- |
#### tree Events
| 事件名 | 说明 | 参数 |
| :--------------: | -------------------------------------- | :------------------------------------------------------------------------------------------------------------------- |
| node-click | 节点被点击时的回调 | （data, node, self） |
| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | (event, data, node, self, (edit, del,isAddNext) => {this.isdel = del;this.isedit = edit;this.isAddNext=isAddNext;})) |
| add-next | 打开增加节点窗口 | (node,treeItemData) |
| update | 打开修改节点窗口 | （node, treeItemData） |
| delete | 删除节点事件 | （node,callback(tree或msg)) |
| saveData | 保存节点事件 | （data,callback(true或msg) |
#### tree Slot
| name | 说明 |
| :----: | :---------------------------------------- |
| ------ | 自定义树节点的内容，参数为 { node, data } |
#### 项目地址
[点击跳转至 GITHUB](https://gitee.com/guoyuanchao/vue-gyc-ui)
#### 目前功能正在完善中，欢迎大家加入下面的 QQ 群，我们一起交流吧！
