• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

lazyit-tools: 基于ant-design得自定义组件

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

lazyit-tools

开源软件地址:

https://gitee.com/solv/lazyit-tools

开源软件介绍:


lz-table表格组件

template

 <lz-table ref="myTable">   <!--工具条-->   <div slot="tools">     <a-button icon="plus" @click="showAdd" type="primary">     	添加     </a-button>     <a-button icon="delete" @click="dels" style="margin-left: 10px;" type="danger">     	批量删除     </a-button>     <a-button icon="import" @click="imports" style="margin-left: 10px;" type="default">     	导入     </a-button>     <a-button icon="export" @click="exports" style="margin-left: 10px;" type="default">     	导出     </a-button>   </div> </lz-table>

script

init方法应放到 mounted 中进行初始化

this.$refs.myTable.init({      url: globalConf.baseURL + '/base/label/getList', // 请求url      columns: [{        field: 'title',        title: '标签名称',        sorter: 'true',        align: 'left'      }],      operate: {        width: 200,        items: [          {            label: '编辑',            color: 'success',            permission: 'table:edit',            event: row => {              this.$refs.edit.showModal(row.id)            },            //按钮隐藏条件            hidden: row => {              if(row.state===1){                return true //隐藏              }else{                return false              }            }          },          {            label: '删除',            color: 'danger',            permission: 'table:edit',            event: row => {              this.$confirm({                title: '确认删除?',                content: '删除后将无法恢复!',                onOk: () => {                  this.$axios({                    url: globalConf.baseURL + '/base/label/del',                    method: 'post',                    data: {                      id: row.id                    }                  }).then(() => {                    this.$message.success('删除成功')                    this.$refs.myTable.selectedRowKeys = []                    this.search({})                  })                }              })            }          }        ]      }    }, () => {      this.search({})    })

属性

init的更多属性-下面展示的为默认值

属性说明是否必填类型默认值
url请求链接String
method请求方式post/getget
pagination是否显示分页booleantrue
queryParams默认参数Object{}
pageNumber初始化加载第一页,默认第一页Number1
pageSize每页的记录行数(*)Number10
pageList可供选择的每页的行数Array[10, 25, 50, 100]
showColumns是否显示所有的列booleantrue
showRefresh是否显示刷新按钮booleantrue
changeSize允许改变列大小booleantrue
showCheckBox显示复选框booleanfalse
showIndex显示序号booleantrue
height行高,如果没有设置height属性,表格自动根据记录条数设置表格高度Number500
columns定义列Array
operate定义操作Array

columns示例

[{

field: 'title', //字段名

title: '标签名称', //显示名sorter: 'true', //是否可以排序permission: 'table:edit', //权限标识width:'200px',//宽度 ,不配置则自适应宽度align: 'left'//对齐方式 可选:left center right},{field: 'name',title: '名称',sorter: 'true',align: 'left'}]

columns字段格式化显示格式化文本: -- 常用于标题,点击查看详情```javascript{field: 'title',title: '名称',sorter: 'true',align: 'left',width: 100,formatter: {type: 'text', //格式化方式format: row => {   return {       value: row.title, //显示文本(必填)         color: 'primary', // 显示颜色 'primary','danger','success','warning','info','default'         event:()=>{ // 点击触发事件            // ...          }       }   }   }   }

格式化为 图片

用于显示单个图片 比如头像,商品主图

{  field: 'headImage',  title: '状态',  sorter: 'true',  align: 'center',  width: 100,  formatter: {    type: 'image', //格式化方式    format: row => {      return {      	name:'',// 名称      	url:''  // 图片路径      }    }  }}

格式化为图文

可用来显示 头像+名称效果,或者商品主图+名称+价格效果

{  field: 'name',  title: '状态',  sorter: 'true',  align: 'center',  width: 100,  formatter: {    type: 'image-text', //格式化方式    format: row => {      return {      	name:'',// 名称      	url:''  // 图片路径      	text:[ //显示文本内容, 建议一行或两行          {            content:'显示文本'          },          {            content:'显示文本'          }      	]      }    }  }}

格式化为开关

常用于状态切换列,比如:是|否

{  field: 'state',  title: '状态',  sorter: 'true',  align: 'center',  width: 100,  formatter: {    type: 'switch', //格式化方式    format: row => {      return {      	value:true,// 是否选中  true | false      	change:()=>{// change事件回调          const v = !row.state          // ...        }      }    }  }}

格式化徽章

常用于显示各种状态 如,等待审核-gray,审核通过-blue,审核拒绝-red

{  field: 'state',  title: '状态',  sorter: 'true',  align: 'center',  width: 100,  formatter: {    type: 'badge', //格式化方式    format: row => {      return {      	value:'审核通过',      	color:'blue'//徽章颜色'blue','green','gray','orange','yellow','red' 等      }    }  }}

方法

this.$refs.myTable.selectedRowKeys //获取或设置选中的行,[id,id,id,id]
this.$refs.myTable.selectedRows //获取或设置选中的行,[{row},{},{}]
this.$refs.myTable.search(param || {}) // 执行搜索,param{k:v} json参数
this.$refs.myTable.getSelected() //获取选中项 {selectedRowKeys,selectedRows}
this.$refs.myTable.setSelected(selectedRowKeys,selectedRows)//设置选中项

lz-search搜索组件

更新日志

  • 2020-09-15:新增树形下拉懒加载数据
  • 2020-05-15:新增月份选择框

template

  <lz-search ref="searchBar" :items="items" @search="search"></lz-search>

items说明

export default [//文本  {    type: 'text', //组件类型    dataIndex: 'name', //组件key    label: '名称', //组件显示名称    defaultValue: '' //默认值  },  //下拉静态数据  {    type: 'select',    dataIndex: 'state',    label: '状态',    defaultValue: '',    options: [ //选项配置      {        label: '启用',//名称        value: '1' //值      },      {        label: '禁用',        value: '0'      }    ]  },  //下拉动态数据   {    type: 'select',    dataIndex: 'state',    label: '状态',    defaultValue: '',    options: [],    optionsConfig: { //动态数据配置       url:'http://localhost:8102/base/classify/getAll',//数据请求地址result:{code:1,content:[]}       label: 'title',// label对应key  不设置默认label       value: 'id' //value 对应key  不设置默认value    }  },    //树形下拉   {    type: 'tree-select',    dataIndex: 'dept',    label: '树形下拉',    defaultValue: '',    allowLv: '>=0',//允许选择层级的条件===n,!==n ,>=n ,<=n,>n,<n,false 不使用条件(不使用条件时,可通过返回结果内增加disabled=[true|false]控制是否可选)    asyncLoad:false,//是否开启数据懒加载(开启后会在请求url上增加参数?pid=value)    optionsConfig: {       url:'http://localhost:8102/base/classify/getAll',//数据请求地址result:{code:1,content:[{label,value,lv,[disabled]}]}       label: 'title',// label对应key  不设置默认title       value: 'id', //value 对应key  不设置默认value       lv: 'lv'//层级 不设置 默认 lv    }  },  //日期范围  {    type: 'range-picker',    dataIndex: 'dates',    label: '日期范围',    defaultValue: ''  },  //月选择框  {    type: 'month-picker',    dataIndex: 'month',    label: '月份选择',    defaultValue: ''  }]

事件

事件名称说明回调参数
search节点点击事件function(values)

values:搜索条件值

方法

事件名称说明使用示例
getValues主动获取搜索条件值this.$refs.searchBar.getValues()

lz-tree 树形

template

<lz-tree ref="lzTree" :replaceFields="{             key: 'key',            title: 'title',            children: 'children'        }"        :asyncLoad="asyncLoad"        @click="nodeClick"></lz-tree>

asyncLoad:异步加载数据,不需要异步时可不配置

script

 this.$refs.lzTree.init(treeData)//treeData 为初始化数组,异步时treeData若不填,则默认请求一次asyncLoad({id:0})

属性说明

属性说明类型默认值
replaceFields替换结果集中key,title,children为对应字段Object{
key: 'key',
title: 'title',
children: 'children'
}
asyncLoad异步加载数据function(node)-

replaceFields示例

{    key: 'id',  // 唯一值 ,默认id    title: 'name', // 显示内容,默认name    children: 'children' //直接点键  }

asyncLoad实例

asyncLoad({id}){  return new Promise(resolve => {    this.$axios({      url:'http://localhost:7001/center/pc/serve/goods/category/getTree',      params:{pid:id}    }).then(res=>{      resolve(res.data) //子节点数据 []    })  })},

事件说明

事件名称说明回调参数
click节点点击事件function(value)

value:当前选中节点json数据

方法说明

方法名称参数说明
refreshByPidid属性某节点下数据

例:

this.$refs.lzTree.refreshByPid("1308741694174265344");//刷新id 1308741694174265344下的直接点数据

lz-text文本预览

template

<lz-text :value="lztext" color="primary" @click="textClick"></lz-text>

属性说明

属性说明类型默认值
color颜色(primary,success,warning,error)String

事件

事件名称说明回调参数
click点击事件,返回参数 lztextfunction(value)

value说明:传入值lztext

lz-upload-tools 文件上传-表格工具条

单文件上传,常用于table表格工具条

template

<lz-upload-tools        @beforeUpload="beforeUpload"        @doneUpload="doneUpload"        label="导入"        :size="1"        accept=".xlsx,.xls"        action='http://localhost:8102/base/common/upload/image'/>

属性

属性说明类型默认值
label组件名称String导入
size允许上传文件大小 单位MBNumber2
accept允许上传文件类型String
action文件上传路径String

事件

事件名称说明回调参数
beforeUpload文件开始上传前调用function(values)
doneUpload文件上传完成后调用function(values)

values示例

{		file:File,		id: "1qgc04h0lsclr7bhtcby"    name: "文件名.xlsx"    original: "源文件路径"    path: "压缩文件路径"    state: 2 //状态,1开始上传,2上传成功,3上传失败	}

lz-upload文件上传-表单

多文件上传

template

<lz-upload        v-model="uploadList"        :max-num="5"        :size="1"        @change="uploadChange"        accept=".jpg,.png,.xlsx"        :disabled="false"        imgBasePath="https://echftp.yqzhfw.com/"        action='http://localhost:8102/base/common/upload/image'        :replaceFields="{          name: 'name',          path: 'path',          original: 'original',          size: 'size',          suffix: 'suffix',        }"        :step="{ size: 1024 }"/>

属性说明

属性说明类型默认值
value(v-model)设置上传文件默认值Array[]
max-num允许最大文件数Number0
size单位MBNumber2
accept允许上传文件类型String几乎所有文件
disabled是否禁用booleanfalse
imgBasePath文件访问跟路径String
action文件上传路径String
replaceFields结果 key替换Object{
name: 'name',
path: 'path',
original: 'original',
size: 'size',
suffix: 'suffix',
}
step开启分片上传Objectfalse

step说明

属性说明类型默认值
size分片大小,单位kbNumber

事件

事件名称说明回调参数
change文件发生改变后调用Change(values)

values示例

[{        name: '音频服务.png',  //必须        path: '/basis/2020/7/10/13acde2b08e84fc7bae4e9c0195facfc.png' //必须	}]

lz-image 图片预览

<lz-image url="path" :data-list="dataList"></lz-image>

属性

属性说明类型默认值
urldataList 中视频访问地址keyStringpath
dataList视频列表Array
baseUrlurl跟地址String

dataList

[  {  	path: 'https://echftp.yqzhfw.com/xxx.png'  },  {  	path: 'https://echftp.yqzhfw.com/xxx.png'  },  {  	path: 'https://echftp.yqzhfw.com/xxx.png'  }]

lz-video 视频预览

template

<lz-video url="path" :data-list="videoDataList"></lz-video>

属性

属性说明类型默认值
urldataList 中视频访问地址keyStringpath
dataList视频列表Array
baseUrlurl跟地址String

dataList示例

[  {  	path: 'https://echftp.yqzhfw.com/xxx.mp4'  },  {  	path: 'https://echftp.yqzhfw.com/xxx.mp4  },  {  	path: 'https://echftp.yqzhfw.com/xxx.mp4'  }]

lz-tinymce 富文本

template

<lz-tinymce            v-model="a"            height="300px"            staticPath="https://ksource.yqzhfw.com/resource"            action="https://ksource.yqzhfw.com/basis/api/base/v1/base/common/file/fileUpload"            basePath="https://echftp.yqzhfw.com/"  />

属性说明

属性说明类型默认值
value(v-model)用于设置当前富文本的内容String
disabled设置当前是否可编辑booleanfalse
skin皮肤["light", "dark"]Stringlight
width宽度String100%
height高度String300px
staticPath静态资源路径(可设为网络跟地址)String/static
action上传地址String
basePath文件访问跟地址String

事件

事件名称说明回调参数
input输入时回调function(values)
change内容变化时回调function(values)

values示例

<p>xxx</p>

lz-multiple-selector多选选择器

效果图

wg8yb6.jpg

template

<lz-multiple-selector               action="http://localhost:7001/center/pc/serve/goods/category/getList"               :replaceFields="{
                      

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap