zj-element

Zj-Element

基于ElementUI的VUE组件——Жидзин（Zidjin）系列组件库。

安装

推荐使用 npm 的方式安装。

npm install element-ui
npm install zj-element

引入

全局引入，在 main.js 中写入以下内容：

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui'; // 引入ElementUI库，必须
import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI样式，必须
// 如果希望使用自定义样式，建议改成引用element-ui.css
// import './static/css/element-ui.css'; // 引入ElementUI自定义样式，必选其一

import ZjElement from "zj-element"; // 引入ZjTianditu库

Vue.use(ElementUI); // 注册ElementUI，必须
Vue.use(ZjElement); // 注册ZjTianditu

new Vue({
  el: '#app',
  render: h => h(App)
});

局部引入，在 vue页面文件中写入以下内容

import {ZjForm, ZjTable, ZjDialog} from 'zj-element';
export default {
    components: {
        ZjForm,
		ZjTable,
		ZjDialog,
    },
};

Zj-Table 表格

基于ElementUI的表格组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-table :table-header="tableHeader" :table-data="tableData"></zj-table>
<script>
    import {ZjTable} from 'zj-element';
    export default {
        components: {
            ZjTable,
        },
        data: ()=>({})
    };
</script>

Zj-Table Attributes

参数	说明	类型	可选值	默认值
table-header	表头配置	array	-	-
table-data	表格数据	array	-	-
height	表格高度	number	-	-
config	表格配置	object	{ // 空数据时显示的文本内容 emptyText: '暂无数据', //当内容过长被隐藏时显示 tooltip showOverflowTooltip: false, }	-

Table-Header Options

参数	说明	类型	可选值	默认值
type	单元格数据类型	array	'text', 'selection', select', 'image', 'button', ‘switch’，'time','download','expand','number'	-
key	键名	string	-	-
value	值，列名	string	-	-
placeholder	空占位符	string	"-"	-
tip	鼠标移上提示。浏览器提示	string	-	-
sortable	当前列是否支持排序	boolean	true	false
width	列宽度。单位默认px	number		100
option	选项。将传入的值转为指定内容 适用：select	object	例：{1: '男', 2: '女'}	-
showTip	是否鼠标移上提示	boolean	true	false
format	将标准时间字符串转为指定格式 标准时间例子：'2015-03-05 17:59:00' 适用：time	string	'yyyy-mm-dd HH:ii:ss'	'yyyy-mm-dd HH:ii:ss.f'
showOverflowTooltip	当内容过长被隐藏时显示	boolean	true	false
buttons	按钮配置 适用：button	array	例： [{ emit: 'emitA', text: '查看', key: 'sex', value: 2,/* 键值匹配则显示，否则不显示 / disabled: 'ban', / 键不存在则禁止点击 / not_value: '神', / 键值不匹配则显示，否则不显示 */, class: 'view' color: '#F00' }]	-
color	文字颜色	string	indigo, red, orange, green, blue, purple, gray	-
class	自定义列的样式名	string	-	-
isBold	是否文字加粗	boolean	true	false
emit	自定义列单格格信号名	string	-	-
hide	是否隐藏列	boolean	true	false
spanMethod	是否合并列的方法	function	-	-
color	操作列定义颜色	string	'#dd0000'	-
type	操作列定义类行	string	text	text

Table-Data Options

参数	说明	类型	可选值	默认值
key	键名	string	-	-
value	值，列名	string	-	-
value	图片链接， 适用：image	string, array	-	-

Config Options of Table-Header Options

参数	说明	类型	可选值	默认值
path 适用：download	指定下载文件的路径前辍	String	-	-
showFilename 适用：download	显示文件名	Boolean	false	true
showFileIcon 适用：download	显示文件图标	Boolean	false	true
showDownloadIcon 适用：download	显示下载图标	Boolean	true	false
nodeName 适用：download	指定文件名的节点键名	String	-	'name'
nodeUrl 适用：download	指定文件链接的节点键名	String	-	'url'
nodeFormat 适用：download	指定文件格式的节点键名 如未指定则自动识别文件名格式	String	-	'format'

Zj-Form 表单

基于ElementUI的表格组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-form :form-basics="basics"></zj-form>
<script>
    import {ZjForm} from 'zj-element';
    export default {
        components: {
            ZjForm,
        },
        data: ()=>({
            basics: 
        })
    };
</script>

Zj-Form Attributes

参数	说明	类型	可选值	默认值
form-header	表单配置	array	-	-
form-data	表单数据	object	-	-
column	分列数	number,string	1, 2, 3, 4, 6, 12, 24	2
size	表单格子尺寸	string	空值/medium / small / mini / min 对应高度：40/36/32/28	-
label-width	表单域标签的宽度	string	'50px'	'auto'
label-position	表单标签的对齐方式 如果值为 left 或者 right 时，则需要设置 label-width	string	left, right, top	right
show-confirm	显示确认按钮	boolean	true	false
show-reset	显示重置按钮	boolean	true	false
show-cancel	显示取消按钮	boolean	true	false
show-edit	显示编辑按钮（editable=='edit'需要同时满足）	boolean	false/true	false
show-delete	显示删除按钮（editable=='edit'需要同时满足）	boolean	false/true	false
auto-clear	关闭时自动清除图像等数据	boolean	false	true
inline	已去除。行内表单模式 V1.0.10去除，不适用复杂表单，由search-bar代替	boolean	true	false
editable	是否可编辑表单	String,Boolean	add,view,view,finity	edit
config	表格配置/表格接口配置	object	{ // 空数据时显示的文本内容 emptyText: '暂无数据',} { emptyText: '-', underline: true, //数据请求接口 addAction: { enable: true, url: '/api/enroll_add', method: 'POST', headers: { Authorization: localStorage.getItem('token') }, nodeStatus: 'err', nodeStatusValue: 0,}	-
action-success-function	请求接口成功回调函数	Function	actionSuccess(result, action, param) { // console.log("onTheadEditSuccess:", result, action, param) this.showLoading = false; this.download(); this.$message({ message: '保存成功', type: 'success' });
action-fail-function	请求接口失败回调函数	Function	actionEditFail(error, action, param) { console.log("onTheadEditFail:", error, action, param) this.$message({ message: error.msg, type: 'warning' }); this.showLoading = false; },	-
switch-edit	是否使用编辑模式	Boolean	true	false
enableEdit	初始化编辑状态	Boolean	true	false
is-strict-param	是否严格约束字段。 是则按照表头生成新参数	Boolean	true	false

Form-Header Options

参数	说明	类型	可选值	默认值
type	表单类型	string	'plain', 'text', 'textarea', 'number', 'password', 'stepper','switch', 'radio', 'checkBox', 'time', 'date', 'month', 'year', 'dateTime', 'dateTimeRange', 'select', 'cascader', 'upload', 'image','editor','plain-time','plain-select', 'plain-switch',headline', 'divider', 'slot',	-
field	键名	string	-	-
title	标题	string	-	-
span	栅格占据的列数	number	1-24	根据column属性等分
place或placeholder	占位提示文字	string	-	-
rules	验证规则	array	{ required: true, message: '枚举名称必填', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, { pattern : /(^1[356789]\d{9}$)/, message: '手机号码错误', trigger: 'blur', },	-
slot	自定义槽名称 适用：slot	string	"title"	-
prepend	前辍文字br />适用：text	string	-	-
append	后辍文字br />适用：text	string	-	-
icon	后辍图标br />适用：text	string	'el-icon-edit'，详见官方文档	-
prependIcon	前辍图标br />适用：text	string	'el-icon-edit'，详见官方文档	-
emit	自定义后辍按钮触发信号名br />适用：text	string	-	-
prependEmit	自定义前辍按钮触发信号名br />适用：text	string	-	-
multiple	是否多选 适用：select	boolean	true	false
collapseTags	多选模式下是否折叠Tag 适用：select, cascader	boolean	true	false
options	选项。 适用：select, sex	array	例：[{ value: 1, label: '男' }, { value: 2, label: '女', }]	-
position	位置 适用：number	string	'right'	-
start	开始 适用：time	string	'08:30'
end	结束 适用：time	string	'00:15'
step	步长 适用：time	string	'18:30'
defaultTime	默认时间 适用：dateTime	string	'12:00:00'
valueFormat	日期时间格式 适用：date, time, dateTime, year, month	string	'yyyy-MM-dd HH:mm:ss' Element 日期格式	'yyyy-MM-dd HH:mm:ss'
pickerOptions	不知道 适用：dateTime	string	'pickerOptions'
startPlace	开始占位符 适用：dateTimeRange		'pickerOptions'
endPlace	结束占位符 适用：dateTimeRange
fill	按钮激活填充色和边框色 适用：radio	string	'#ffffff'
textColor	激活时的文本颜色 适用：radio	string	'#409eff'
config	配置选项 适用：select, upload, cascaders	object	{ label: 'name', value: 'id', }
size	尺寸 适用：text, number, cascaders	string	medium / small / mini/ min	small
showAllLevels	输入框中是否显示选中值的完整路径 适用：cascaders	boolean	true	false
row	文本域显示行数 适用：textarea	number	3	3
activeValue	激活值，即真值 适用：switch	number, string, boolean	-	1
inactiveValue	未激活值，即假值 适用：switch	number, string, boolean	-	0
contentPosition	分割线文字位置 适用：divider	string	left / right / center	center
tip	数据的提示。支持格式化键名 适用：plain	string	分类ID：{{classify_id}}，分类名称：{{classify_value}}。	-
help	数据的帮助图标提示。支持格式化键名 适用：plain	string	同上	-
labelTip	标签的提示。支持格式化键名	string	同上	-
labelHelp	标签的帮助图标提示。支持格式化键名	string	同上	-
ban	禁止编辑	boolean	true	false
action	自动请求接口信息的动作	object	例子：{ enable: true, /* 启用动作，默认true / url: '/api/thread_auth_list/ ', / * 请求地址，必填 / method: 'GET', / * 请求方式，默认值 GET / headers: { Authorization: localStorage.getItem('token') } / * 自定义请求头*/ nodeStatus: 'err', /* * 判断状态的节点名称 , 默认值err*/ nodeStatusValue: 0, /* * 判断节点状态成功的值， 默认值 0*/ nodeData: 'data.list'}，/* * 获取数据的节点名称，默认值data*/ },	_

Config Options of Form-Header Options

参数	说明	类型	可选值	默认值
label	标签键名 适用：select, cascaders	string	-	-
value	键值键名 适用：select, cascaders	string, number	1, 2
checkStrictly	父子节点均可选择 适用：cascaders	boolean	true	false
expandTrigger	次级节点的展开方式 适用：cascaders	string	click / hover	click
lazy	是否动态加载子节点，需与 lazyLoad 方法结合使用 适用：cascaders	boolean
multiple	是否支持多选 适用：cascaders	boolean
emitPath	true返回各级菜单的数组，false返回该节点的值 适用：cascaders	string	false	true
children	树枝键名 适用：cascaders	string
disabled	禁用键名 适用：cascaders	string
leaf	叶子键名 适用：cascaders	string
name	上传文件指定的键名 适用：upload	string	-	'file'
showTitle	是否显示文件标题 适用：upload	boolean	false	true
action	上传请求地址 适用：upload	string	'/api/upload'	-
headers	上传请求头 适用：upload	object	headers: {Authorization: '',}	-
autoUpload	是否自动上传 适用：upload	boolean	false	true
fileType	允许上传的文件类型 适用：upload	-++array	-	['jpg', 'png', 'jpge', 'pdf', 'doc']
limit	限制上传个数 适用：upload	number	-	9
split	当为字符串时候的拆分符 适用：upload	string	-	';'
thumb	预览图标尺寸 适用：upload	string	'small'
size	限制上传的文件大小， 单位：M 适用：upload	number	-	2
data	上传时附带的额外参数 适用：upload	object	data: {menu: '',}	-
nodeStatus	上传状态判断的节点名称 适用：upload	string	-	err
nodeStatusValue	上传状态判断成功的节点值 适用：upload	string,number	-	0
nodeUrl	上传成功后引用链接地址的节点名称，最多两层，用点"."隔开 适用：upload	string	-	'data.url'
nodeTitle	上传成功后引用文件标题的节点名称，最多两层，用点"."隔开 适用：upload	string	-	'data.name'
nodeSize	上传成功后引用文件大小的节点名称，最多两层，用点"."隔开 适用：upload	string	-	'data.size'

Zj-Form Events

事件名称	说明	回调参数
confirm	点击确定触发	data: 键值对表单数据
cancle	点击取消触发
change	失去焦点事件	e:number类型表格失去焦点时的数据

Zj-Form Methods

方法名	说明	参数
clear	清空表单	-

版本说明

V1.0.61.211028-release

修正若干地图调用时不稳定的问题，早期稳定版，用于基本的地图数据展示，无鼠标交互事件等。已停止更新。

V1.1.0.211028-alpha

添加天地图原生坐标标记事件@marker、多边形事件@polygen、标签事件@label。

V1.1.1.211029-beta

支持天地图原生拖动事件@move、缩放事件@zoom。

Zj-Search-Bar 搜索条

基于ElementUI的搜索组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-search-bar :search-form="searchForm" show-search show-reset show-export></zj-search-bar>
<script>
    import {ZjSearchBar} from 'zj-element';
    export default {
        components: {
            ZjSearchBar,
        },
        data: ()=>({
            searchForm: [
                { key: 'company', value: '', title: '签约时间', tip: '公司名称', type: 'input' },
                { key: 'month', value: '', title: '月', tip: '月', type: 'month' },
                { key: 'data', value: '', title: '日期', tip: '日期', type: 'date' },
                { key: 'kinds', value: '', title: '天气', tip: '天气', type: 'select', 
                 options: [
                     { value: 0, label: '晴' },
                     { value: 1, label: '雨' },
                     { value: 2, label: '多云' },
                 ],
                 config: {
                     /* porps属性 */
                     checkStrictly: true, // 父子节点均可选择
                     expandTrigger: 'hover', // 次级节点的展开方式 click / hover
                     lazy: false, // 是否动态加载子节点，需与 lazyLoad 方法结合使用
                     multiple: false, // 是否支持多选
                     emitPath: true, // true返回各级菜单的数组，false返回该节点的值
                     label: 'label', // 标签
                     value: 'value', // 键值
                     children: 'children', // 树枝键名
                     disabled: 'disabled', // 禁用键名
                     leaf: 'leaf', // 叶子键名
                 },
                }
            ]
        })
    };
</script>

Zj-Search-Bar Attributes

参数	说明	类型	可选值	默认值
search-form	搜索配置	array	-	-
show-search	显示搜索按钮	boolean	true	false
show-reset	显示重置按钮	boolean	true	false
show-export	显示导出按钮	boolean	true	false
size 原:button-type	尺寸类型	string	medium / small / mini	small

Search-Form Option

参数	说明	类型	可选值	默认值
key	键名	string	-	-
value	默认值	string	-	-
title	标题	string	-	-
tip	占位文字	string	-	-
type	显示类型	string	input / month / date / select / cascader/dateTimeRange	-
multiple	可多选	boolean	true	false
showAllLevels	显示完整路径	boolean	false	true
options	选项列表 适用：select, cascader	array	[{ value: 0, label: '晴' },...]	-
config	选项的配置 适用：select	object	{ /* porps属性 */ checkStrictly: true, // 父子节点均可选择 expandTrigger: 'hover', // 次级节点的展开方式 click / hover lazy: false, // 是否动态加载子节点，需与 lazyLoad 方法结合使用 multiple: false, // 是否支持多选 emitPath: true, // true返回各级菜单的数组，false返回该节点的值 label: 'label', // 标签 value: 'value', // 键值 children: 'children', // 树枝键名 disabled: 'disabled', // 禁用键名 leaf: 'leaf', // 叶子键名 }	-

Event

事件名称	说明	回调参数
change	当内容值改变时触发	value, key, params，改变的值、键名、全部参数
clear	点击任一格子清除时触发	key, params，清除的键名
search	点击搜索按钮时触发	params，搜索的参数object
reset	点击重置按钮时触发	-
export	点击导出按钮时触发	-

Zj-Dialog 对话框

基于ElementUI的表格组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-dialog :show.sync="show" :config="config"></zj-dialog>
<script>
    import {ZjDialog} from 'zj-element';
    export default {
        components: {
            ZjDialog,
        },
        data: ()=>({
            show: true,
            config: {
                width: '50%',
                title: '新增',
            },
        })
    };
</script>

Zj-Dialog Attributes

参数	说明	类型	可选值	默认值
show	对话框名称	string	true	false
config	对话框配置	object	-	-
show-confirm	显示确认按钮	boolean	true	false
show-reset	显示重置按钮	boolean	true	false
show-cancel	显示取消按钮	boolean	true	false

Config Options

参数	说明	类型	可选值	默认值
title	标题	string	-	-
width	宽度	string	-	50%
mixWidth	最大宽度	string	-	'800px'
destroyOnClose	关闭时销毁 Dialog 中的元素	boolean		true
modalAppendToBody	遮罩层是否插入至 body 元素上	boolean	false	true
closeOnClickModal	是否可以通过点击 modal 关闭 Dialog	boolean	true	false

Event

参数	说明	回调函数
onConfirm	点击确认触发	-
onReset	点击重置触发	-
onClose	点击关闭按钮触发	-

Zj-Pagination 分页器

基于ElementUI的页面组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-pagination :page.sync="page" :size.sync="size" :total="total" @change="onChange" />
<script>
    import {ZjPagination} from 'zj-element';
    export default {
        components: {
            ZjPagination,
        },
        data: ()=>({
            page: 1,
            size: 20,
            total：0,
        })
        methods: {
            onChange(e) {
            this.page = e.page;
            this.size = e.size;
            this.onDownload();
        },
        }
    };
</script>

Zj-Pagination Attributes

参数	说明	类型	可选值	默认值
page	显示页数	number	-	1
size	显示每页数量	number	-	10
total	显示列表总数量	number	-	0
page-sizes	每页显示个数选择器的选项设置	Array	-	[10, 20, 30, 50, 100]
layout	组件布局，子组件名用逗号分隔	-	-	-

Event

参数	说明	回调参数
onSizeChange	pageSize改变时触发	每页条数
onCurrentChange	currentPage改变时触发	当前页

Zj-Menu 菜单栏

基于ElementUI的页面组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-menu :menus="groupMenus"></zj-menu>
<script>
    import {ZjMenu} from 'zj-element';
    export default {
        components: {
        ZjMenu,
    },
        data: () => ({
        data2:[],
        menus: [{},{}],
    }),
        computed: {
        groupMenus() {
            return this.menus.map(it => ({
                title: 'sgswf ',
                // icon: 'http:... ',
                // path: '',
            }))
        },
    },
    }
    
</script>

Zj-Menu Attributes

参数	说明	类型	可选值	默认值
menus				[]
activeMenu
isCollapse		boolean		false
unique-opened		boolean	false	false
collapse-transition		boolean	false	false

Event

参数	说明	回调函数
activeMenu	当前激活菜单
handleSelect	菜单激活回调	index：选中菜单项的index, indexPath:打开的sub-menu的index path

Zj-Tree 列表树

基于ElementUI的页面组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-tree show-operate show-add show-edit show-delete :config=treeConfig :tree-data="groupTree">

<script>
    import {Zjtree} from 'zj-element';
    export default {
        components: {
        Zjtree,
    },
        data: () => ({
        groupTree:[],
        treeConfig:{
            nodeKey: "group", //树枝唯一标识
            showCheckbox: false, //是否可选
            defaultExpandAll: false, //展开所有
            checkStrictly: false, //是否严格的遵循父子不互相关联的做法，默认为 false
            /* props属性，一共就4个，不要像element-ui那样分成子对象了 */
            children: 'children', //树枝
            label: 'name', //标签
        },
    }),
    }

</script>

Zj-Tree Attributes

参数	说明	类型	可选值	默认值
treeData	树数据	[]	-	-
treeExpanded	默认展开的节点的key的数组	Array	-	[]
treeDefault	默认勾选的节点的key的数组	Array	-	[]
config	对话框配置	object	-	-
show-operate	显示操作按钮	boolean	true/false	false
show-edit	编辑按钮	boolean	true/false	false
show-delete	删除按钮	boolean	true/false	false
show-add	添加按钮	boolean	true/false	false
allow-operate-key	配合showOperate使用	boolean	true/false	false
branch-icon	树枝图标	string	-	组织图标
leaf-icon	树叶图标	string	-	用户图标

Config Options

参数	说明	类型	可选值	默认值
nodeKey	节点唯一性键名	string	-	key
showCheckbox	是否可选	boolean	true/false	false
highlightCurrent		boolean	true/false	true
defaultExpandAll	展开所有	boolean	true/false	false
checkStrictly	是否严格遵守父子互不关联的做法	boolean	true/false	false
defaultExpandedKeys	默认展开的节点的key的数组	Array	-	[]
checkOnClickNode	是否在点击节点的时候展开或者收缩节点。	boolean	true/false	false
children	树枝键名	string	-	children
label	标签键名	string	-	label
tip	移上提示文字键名	string	-	tip

Event

事件名称	说明	回调参数
click	当节点点击时触发	-
check	当复选框选择时触发	-

Zj-Loading 加载

基于ElementUI的页面组件——Жидзин（Zidjin）系列组件库。

基本用法

<zj-loading text="加载中" :show="showLoading" />

<script>
    import {ZjLoading} from 'zj-element';
    export default {
        components: {
        ZjLoading,
    },
        data: () => ({
       
    }),
    }

</script>

Zj-Loading Attributes

参数	说明	类型	可选值	默认值
text	显示在加载图标下方的加载文案	string	-	-
showk	控制加载图标的显示和隐藏	boolean	true/false	false

日志：

zj-form-dialog

zj-form-input

zj-table-dialog

zj-form-button

zj-formTinymce

等组件待删除。