gld-ui
v0.1.12
Published
``` npm install npm run serve npm run lib （npm 包） npm set resistry "https://registry.npmjs.org" #修改源 npm version patch/minor/major #修改版本号 npm login #登陆 npm publish #发布 ``` ### 版本记录 ## 主版本号 major ## 次版本号 minor ## 修定记录 patch 0.1.11 解决了操作一列的位置问
Downloads
2
Readme
gld-ui
Project setup
npm install
npm run serve
npm run lib （npm 包）
npm set resistry "https://registry.npmjs.org" #修改源
npm version patch/minor/major #修改版本号
npm login #登陆
npm publish #发布版本记录
主版本号 major
次版本号 minor
修定记录 patch
0.1.11 解决了操作一列的位置问题-默认右边
use Description
vue 中如何引用
npm i gld-ui --save
1.在 main.js中 引入
import GldUi from 'gld-ui'
import 'gld-ui/lib/gld-ui.css'
Vue.use(GldUi)
2.在业务组件中使用 table
<gld-table
:TData="tableData"
:TTitle="tableTitle" />
[gld-table] instructions
---- gld-table 使用介绍：-----
Table Attributes
参数 说明 类型 可选值 默认值
TId 表格id string ""
TLoading 是否加载 boolean false
TTitle 表头数据 array []
TData 表格数据 array []
TIsShowIndex 是否显示序号 object { show: true, // 控制显示
label: "序号", // 别名
fixed: "left" // 控制文案的位置 }
TSort 是否排序（默认列） object {
default: {
prop: "date",
order: "descending", // order: ascending, descending
},
sortArr: [],
}
TIsShowPage 是否显示分页 boolean false
TTotal 总条数 number 0
TCurrentPage 当前页 number 1
TPageSize 当前页显示条数 number 10
TBorder 是否显示网格 boolean true
TMaxHeight 流体高度 number 0
THeight 固定表头 number 0
TIsShowCheckBox 是否显示多选 boolean false
TIsShowCheckBoxFixed 控制多选 object { fixed: true, width: "50"}
TMultipleSelection 接收多选初始值 array []
TOverflowTooltip 超出时是否需要提示 boolean true // 新增属性
TEdit 是否显示编辑 object { // 新增属性
show: false,
title: "操作",
editTypes: [
{
label: "编辑",
css: "",
property: "",
pass: true, // true：一级拦截(默认) false:二级拦截
},
{
label: "删除",
css: "",
property: "",
pass: true,
},
],
};
TClickItem 可点击的单元格 array []
TShowSummary 总计 object { // 新增属性
show: false,
type: "auto",
sumFn: function () {
return [];
},
};
isRemarkEdit 备注 是否可编辑TODO boolean false // 新增属性
isDataSetEdit 数据集名称是否可编辑TODO boolean false // 新增属性
TAlign 表格文字位置 array []
TRowKey 识别行的唯一标识 [number, string] "" // 新增属性
TActiveRow 激活当前行 [Number, String, Boolean, Array] false // 新增属性
TRowDrop 是否启动行拖拽 boolean false
TpageSizeArr 自定义页码 array [10, 20]
TMultiLevelHeader 是否启动多级表头 boolean false // 新增属性
TitleWidth 表头宽度 array [] // 新增属性
TtootipArr 表格提示信息 array [] // 新增属性
tooltipEffect 提示框类型 string dark | light dark
totalNum 总计 array [] 待定
titleContent 表格标题 string ""
isMaxMinAgvLegendShow最大值/最小值/平均值的图例是否显示boolean false
slotProp 自定义列 array [] 待定
isExport 是否导出 boolean false
isSearch 是否开启搜索 boolean false
Table Methods:
方法名 | 说明 | 参数
:-----:|:-----:|:-----:|
changePage | $emit 翻页 | (pageSize, pageNum)
handleSelectionChange | $emit 多选 | (type, selectionArr)
handleJump | $emit 表格跳转| (row, column, prop)
TSortChange | $emit 排序 | (column. row, order)
rowDrop | $emit 行拖拽 (el)
searchText | $emit 搜索内容 | (searchContent)
exportExcel | $emit 导出 | ()
table 功能使用说明：
所要求的数据格式
{
"type": "table",
"title": [
{
"label": "时间3",
"prop": "time3",
"child": [
{
"label": "时间",
"prop": "time",
"isNeedOrdered": true // 是否排序
},
{
"label": "地区",
"prop": "range",
"isNeedOrdered": true // 是否排序
}
]
},
{
"label": "XXX",
"prop": "countStage",
"clickType": "model", // 点击展示弹框
"isNeedOrdered": false
},
{
"label": "交易量(宗)",
"prop": "countValue",
"isNeedOrdered": false,
"clickType": "href" // 点击跳转
}
],
"sum": { // 合计
"type": "avg", "time": "合计", "countValue": 1047, "countStage": 2765
},
"avg": { // 平均
"time": "平均", "countValue": 20.8, "countStage": 20.6
},
"data": [
{
"id": 0,
"time": "2020年1月",
"time3": "2020年1月",
"range": "北京市",
"countValue": 1047,
"countStage": 2000,
"valueType": [{ "countValue": "max" }, { "countStage": "min" }]
},
{
"id": 1,
"time": "2020年2月",
"time3": "2020年2月",
"range": "上海市",
"countValue": 47,
"countStage": 3000,
"valueType": [{ "countValue": "min" }, { "countStage": "max" }]
}
]
}
现在 所能使用的功能:
1. 下钻以及跳转
需要传入（TClickItem）
说明 ：
a.当某列数据需要下钻时，在cells中将对应的列名追加进去，并且下钻后的事件，在 回调 cb中执行
b.当某列需要跳转时，cells中将对应的列名追加进去，并且需要结合 组件中的 handleJump 方法使用
实例：
TClickItem: [
{
type: "customEvent",
cells: ["time3"],
cb: (form) => {
console.log(form);
}
},
{
type: "jump",
cells: ["countValue"]
}
],
2.平均值 （平均值会出现在 总计上一行位置）
拿到 table数据中的 avg字段，直接追加到 data字段的 最后一行数据上。
3.最大最小值
向组件直接传入 isMaxMinAgvLegendShow：false/true 默认为 false。
4.多表头
按照数据格式返回即可。
5.排序
a.某一列是否排序 是根据 后端返回的表头数据中的 isNeedOrdered 自动判断（前端你不用做任何处理）。
b.之后 引用组件时 使用 TSortChange({ column, prop, order }) 方法 进行逻辑书写。
6.自定义列
a. 首先 传入 slotProp: [...],
b. 之后使用 slot插槽 来自定义单元格内容
slotProp: ['time'],
<gld-table
:slotProp="slotProp"
>
<!-- 自定义列 -->
<template slot="time" slot-scope="row">
<span>{{row.scope.time}}</span>
</template>
</gld-table>
7.总计
从后端返回的数据中 取 sum 字段
然后经过处理后 返回一个数组，传给 组件中的 totalNum;
let sum = resData.sum;
let total = [];
for (let key in sum) {
total.push(sum[key]);
};
total.unshift("");
this.totalNum = total;
8.文字靠左 数字靠右 (内部已实现，无需在做任何处理)
9.导出
在组件中 添加 exportExcel 方法
10.拖拽排序
注意 使用 拖拽 需要借助 sortablejs
引入 import Sortable from "sortablejs";
之后 使用 rowDrop
rowDrop ({ $el }) {
Sortable.create($el, {
onEnd ({ newIndex, oldIndex }) {
});
},
11.多选
a. 设置 TIsShowCheckBox：false/true。
b. 使用 handleSelectionChange 方法 书写业务。
12.分页
a. 设置 TIsShowPage: false/true (是否显示分页)
b. 设置 TpageSizeArr: [10,20] (设置每页显示条数，默认为 10,20)
c. 使用 changePage(pageSize, currentPage) 处理具体逻辑
13.搜索
a. 设置 isSearch： false/true
b. 使用 tableSearch(content) 书写具体业务[usually-echarts] instructions
属性说明：
这些属性适用于 （柱状图，饼图，折线图）
width [number] 默认 500
height [number] 默认 500
titleContent [string] 标题名称
isExport [boolean] 是否导出图片
type [stirng] echarts类型（bar,line...）
refName [string] 元素名
legendName [array] 图例名称
xData [array] x轴数据
xUnit [string] x轴单位
yUnit [string] y轴单位
seriesData [array] echarts 数据（对应 echarts中的 series 属性）
customConfig [object] 自定义配置 (设置此属性，会覆盖默认的echarts配置)
方法：
exportPng(id) 导出图片
id: 元素id;
注意：
如果 echarts 类型不是（柱状图，饼图，折线图） 则直接使用
customConfig (当设置customConfig时，设置其他echarts属性无效)
例子：
<usually-echarts
:refName="echartsID"
:isExport="true"
:legendName="legendName"
:seriesData="seriesData"
titleContent="柱状图"
type="pie" />
created () {
const resData = resultData.data;
const { seriesData, legendName } = this.handlePieData(resData);
this.seriesData = seriesData;
this.legendName = legendName;
},
methods: {
clickEvent () {
this.seriesData = [
{
name: '降水量',
data: [12, 43, 26, 7, 70, 100, 130],
type: "line"
}
];
},
// 柱状图，折线图, 雷达图
transformationData (data) {
const colnames = data.colnames;
const coldata = data.coldatas;
let legendName = [];
let seriesData = [];
for (let item of colnames) {
for (let itemData of coldata) {
for (let key in itemData) {
if (item.id === key) {
let objData = {
name: item.name,
data: itemData[key],
type: item.type
};
seriesData.push(objData);
}
}
}
legendName.push(item.name);
}
return { seriesData, legendName };
},
// 饼图
handlePieData (data) {
const colnames = data.colnames;
const coldata = data.coldatas[0];
const legendName = data.rownames;
const tmpId = colnames[0].id;
const echartData = coldata[tmpId];
const resultData = [];
legendName.map((item, index) => {
let itemObj = {
name: item,
value: echartData[index]
};
resultData.push(itemObj);
});
const seriesData = [
{
type: 'pie',
data: resultData
}
];
return { seriesData, legendName };
}
}[gld-select] instructions
属性说明：
optionData [array] 默认 500
defaultVal [string|number] 默认 500
placeholderText [string] 标题名称
multiple [boolean] 多选
disabled [boolean] 禁用
clearable [boolean] 清空
isOpenTip [boolean] 是否开启 提示（当文字过长时可以使用）
placement [string] 提示文字显示方向 (top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end)
方法：
change(data)
data: 选中的值
例子：
<gld-select
:optionData="options"
:defaultVal="selVal"
@changeData="changeData">
</gld-select>[gld-codemirror] instructions
属性说明：
value [string] 默认值
width [number] 默认 500
height [number] 默认 500
refId [string] 元素id
theme [string] 编辑区主体，默认为 'base16-light' (solarized/monokai/base16-light)
isShowLineNumber [boolean] 是否显示行号, 默认为 false
readOnly: [boolean] 是否只读， 默认为 false
方法：
onBlur(data)
data: 输入的值；
change()
data: 输入的值；
例子：
<gld-codemirror
@onBlur="onBlur"
@onChange="onChange"
/>