znl-vue-ui-new

vue-znl-ui

正能量vue组件库

查看完整文档查看文档

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'
import vueZnlUi from 'vue-znl-ui'
import 'vue-znl-ui/dist/theme-chalk/index.css';

Vue.use(vueZnlUi)

注意样式文件需要单独引入。

按需引入

import Vue from 'vue';
import { Button, Lists } from 'vue-znl-ui';
import App from './App.vue';

Vue.use(Button)
Vue.use(Lists)

表格组件
轮播组件

znl-gridmodule

用于展示多条结构类似的数据
基础的表格数据

基础表格 (demo)

<znl-gridmodule
  :on-init="onInit"
  :columns="columns"
  :item-source="itemSource"
  :on-refresh="onRefresh"
  :show-header="false"
  :on-save-setting="null"
  @cell-click="cellClick"
  :on-save-config="onSaveConfig"
  ref="znltablebase"
  gridtype="action"
  @current-row-change="currentRowChange"
  >

  <znl-button @click="changeCurrentCell">changeCurrentCell</znl-button>
</znl-gridmodule>
<script>
  export default {
    data() {
      return {
        columns: [],
        itemSource: []
      };
    },

    methods: {
      async onInit () {
        this.columns = [
          {
            binding: 'Model',
            name: 'Model',
            header: '型号',
            visible: true,
            dataType: 1,
            width: 100,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'Year',
            name: 'Year',
            header: '年份',
            visible: true,
            dataType: 1,
            width: 200,
            isReadOnly: true,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'AdoptQty ',
            name: 'AdoptQty ',
            header: '采纳数量',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            dataMap: [{ key: 1, value: '可用' }, { key: 2, value: '禁用' }],
            showDropDown: true,
            isSystem: false
          },
          {
            binding: 'ProductCategory ',
            name: 'ProductCategory ',
            header: '产品类型',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'StorageName ',
            name: 'StorageName ',
            header: '位置',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          }
        ]
        this.itemSource = [
          {
            Model: 'LM358',
            Year: '2015-05-01',
            AdoptQty: 1,
            ProductCategory: '原装',
            StorageName: '深圳北'
          },
          {
            Model: 'AST',
            Year: '2014-05-04',
            AdoptQty: 2,
            ProductCategory: '现货',
            StorageName: '北京'
          },
          {
            Model: 'LM357',
            Year: '2016-05-01',
            AdoptQty: 1,
            ProductCategory: '原装',
            StorageName: '上海'
          },
          {
            Model: 'LM356',
            Year: '2017-05-04',
            AdoptQty: 2,
            ProductCategory: '现货',
            StorageName: '广州'
          },
          {
            Model: 'LM359',
            Year: '2018-05-01',
            AdoptQty: 1,
            ProductCategory: '原装',
            StorageName: '深圳北'
          }
        ]
      }

    },

    watch: {

    }
  };
</script>

可编辑表格 (demo)

<znl-gridmodule
  gridtype="action"
  header="供应商库存"
  :table-handle="true"
  :on-init="onInit"
  :columns="columns"
  :item-source="itemSource"
  :on-refresh="onRefresh"
  :right-menus="rightMenus"
  :on-page-changed="onPageChanged"
  pagination-position="top"
  :page-index="1"
  :page-size="5"
  :total-count="30"
  :cell-line-height="30"
  :is-fields-search="true"
  :is-multi-rows-check="true"
  ref="edittable"
  :on-search="onSearch"
  @select-change="selectChange"
  :enter-cellmoves-direction="true"
  @shortcut-column-switch="shortcutColumnSwitch"
  @switch-hide-column="switchHideColumn"
  :on-save-setting="onSaveSetting"
  >

  <div slot="action-form">
    <znl-input placeholder="请输入数据" :width="100"></znl-input>
    <znl-button @click="toggleRowSelection">点击执行</znl-button>
    <znl-button style-type="main" @click="getChangedData">获取修改的数据</znl-button>
  </div>

  <div slot="heading-slot">
    <znl-input placeholder="请输入数据" :width="100"></znl-input>
    <znl-button >点击执行</znl-button>
    <znl-button @click="clickHandler1">点击搜索</znl-button>
  </div>
</znl-gridmodule>
<script>
  export default {
    data() {
      return {
        columns: [],
        itemSource: [],
        rightMenus: [
          {
            text: '测试',
            iconName: 'icon-table_set_btn_n',
            disabled: true,
            display: true,
            click: (row) => {
              console.log(row)
            }
          }
        ]
      };
    },

    methods: {
      async onInit () {
        this.columns = [
          {
            binding: 'Model',
            name: 'Model',
            header: '型号',
            visible: true,
            dataType: 1,
            width: 100,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'Year',
            name: 'Year',
            header: '年份',
            visible: true,
            dataType: 1,
            width: 200,
            isReadOnly: true,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'AdoptQty ',
            name: 'AdoptQty ',
            header: '采纳数量',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'ProductCategory ',
            name: 'ProductCategory ',
            header: '产品类型',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'StorageName ',
            name: 'StorageName ',
            header: '位置',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          }
        ]
        this.itemSource = [
          {
            Model: 'LM358',
            Year: '2015-05-01',
            AdoptQty: 100,
            ProductCategory: '原装',
            StorageName: '深圳北'
          },
          {
            Model: 'AST',
            Year: '2014-05-04',
            AdoptQty: 200,
            ProductCategory: '现货',
            StorageName: '北京'
          },
          {
            Model: 'LM357',
            Year: '2016-05-01',
            AdoptQty: 300,
            ProductCategory: '原装',
            StorageName: '上海'
          },
          {
            Model: 'LM356',
            Year: '2017-05-04',
            AdoptQty: 400,
            ProductCategory: '现货',
            StorageName: '广州'
          },
          {
            Model: 'LM359',
            Year: '2018-05-01',
            AdoptQty: 500,
            ProductCategory: '原装',
            StorageName: '深圳北'
          }
        ]
      },
      async onRefresh () {
        console.log(123)
      },
      onPageChanged () {

      }

    },

    watch: {

    }
  };
</script>

灵活的列配置 (demo)

<znl-gridmodule
  gridtype="action"
  header="供应商库存"
  loading-type="animation"
  ref="flexGrid"
  :on-init="onInit"
  :columns="columns1"
  :item-source="itemSource1"
  :on-refresh="onRefresh"
  :is-multi-rows-check="true"
  :right-menus="rightMenus"
  :on-save-rows="onSaveRow"
  :btn-mouse-enter-menus="btnMouseEnterMenus"
  >

  <div slot="action-form">
    <znl-input placeholder="请输入数据" :width="100"></znl-input>
    <znl-button  @click="clickHandler">点击执行</znl-button>
    <znl-button style-type="main">点击搜索</znl-button>
  </div>

  <div slot="heading-slot">
    <znl-input placeholder="请输入数据" :width="100"></znl-input>
    <znl-button >点击执行</znl-button>
    <znl-button >点击搜索</znl-button>
  </div>

  <znl-dialog-mini :visible.sync="dialogMiniVisible" :options="options">
    <div>123</div>
  </znl-dialog-mini>
</znl-gridmodule>
<script>
  export default {
    data() {
      return {
        columns: [],
        itemSource: [],
        options: {},
        dialogMiniVisible: false,
        btnMouseEnterMenus: {
          List: [
            {
              name: '增加',
              click () {
                this.dialogMiniVisible = true
              }
            },
            {
              name: '设置'
            }
          ],
          Binding: 'Model'
        },
        rightMenus: [
          {
            text: '测试',
            iconName: 'icon-table_set_btn_n',
            disabled: false,
            display: true,
            click: (row) => {
              console.log(row)
            }
          }
        ]
      };
    },

    methods: {
      mouseMenuConfig (config) {
        this.options = config
      },
      async onInit () {
        this.columns1 = [
          {
            binding: 'Model',
            name: 'Model',
            header: '型号',
            visible: true,
            dataType: 1,
            width: 100,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false,
            IsUpperCase: true
          },
          {
            binding: 'Year',
            name: 'Year',
            header: '年份',
            visible: true,
            dataType: 1,
            width: 200,
            isReadOnly: true,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'AdoptQty ',
            name: 'AdoptQty ',
            header: '采纳数量',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false,
            IsUpperCase: true
          },
          {
            binding: 'ProductCategory ',
            name: 'ProductCategory ',
            header: '产品类型',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          },
          {
            binding: 'StorageName ',
            name: 'StorageName ',
            header: '位置',
            visible: true,
            dataType: 1,
            width: 150,
            isReadOnly: false,
            isFieldSearch: true,
            isSystem: false
          }
        ]
        this.itemSource1 = [
          {
            Model: 'LM358',
            Year: '2015-05-01',
            AdoptQty: 100,
            ProductCategory: '原装',
            StorageName: '深圳北'
          },
          {
            Model: 'AST',
            Year: '2014-05-04',
            AdoptQty: 200,
            ProductCategory: '现货',
            StorageName: '北京'
          },
          {
            Model: 'LM357',
            Year: '2016-05-01',
            AdoptQty: 300,
            ProductCategory: '原装',
            StorageName: '上海'
          },
          {
            Model: 'LM356',
            Year: '2017-05-04',
            AdoptQty: 400,
            ProductCategory: '现货',
            StorageName: '广州'
          },
          {
            Model: 'LM359',
            Year: '2018-05-01',
            AdoptQty: 500,
            ProductCategory: '原装',
            StorageName: '深圳北'
          }
        ]

        _.each(this.columns1, column => {
          if (column.binding === 'Model') {
            column.buttons = [
              {
                content: (row) => {return row.Model},
                className: 'button-test'
              }
            ]
          }
        })
      },
      async onRefresh () {

      }

    },

    watch: {

    }
  };
</script>
<style>
.znl-dialog-mini li{
  list-style: none;
  padding: 3px 10px;
  &:hover{
    background-color: #ee7700;
  }
}
</style>

Table Attributes (属性)

属性名	作用	默认值	类型	是否必须	参数
on-init	初始化函数		Function	yes
columns	表格列配置		Array	yes
item-source	表格数据	[]	Array
table-row-class-name	表格行类名		Function		[{row, rowIndex}]
show-header	是否显示标题行（兼容hasZnlBtns）		Boolean	true
on-refresh	刷新方法(存在时显示刷新按钮及右键刷新菜单)		Function
on-save-setting	设置方法（用于配置表格，存在时显示设置按钮及展开列按钮）		Function		columns, pageSize
on-save-config	单列设置方法		Function		columns, pageSize
header	标题
is-init	是否用传入的初始化函数初始化组件			true	Boolean
is-fields-search	是否支持搜索			false	Boolean
search-fields	搜索条件（组件会监听这个传入的参数变化，传入搜索条件改变时触发onsearch）		Object
on-search	搜索方法		Function		params
on-page-changed	翻页方法(存在时显示分页器)		Function
page-size	每页条数	20	Number
page-index	当前页	1	Number
total-count	总条数		Number
action-btns	顶部按钮组数据[name:名称，iconName:图标，click:点击事件，tip: 提示文字] []		Array
gridtype	表格类型（action / base）	base	String
is-multi-rows-check	可否多选（多选情况下有第一列选择框）	false	Boolean
is-multi-rows-check-fixed	多选项是否冻结（默认冻结，建议弹框中使用时修改false,否则有不可预估的bug）	true	Boolean
show-delete-row-right-menu	是否显示右键删除按钮	true	Boolean
show-save-btn	是否存在保存按钮	true	Boolean
onResetSetting	重置列设置方法		Function
onResetParams	重置参数设置方法		Function
users	权限设置所有用户		Array
tooltip-content	表格的说明文字，鼠标悬浮在标题处显示		String
from-btns	表单按钮组（配置同action-btns）		Array
from-save-btns	表单按钮组（配置同action-btns，增加class配置）		Array
btn-mouse-enter-menus	鼠标悬浮在单元格按钮上显示的列表，必含字段{List: [{iconName,name,click}] Binding} {List: [],Binding:''}		Object
is-show-rightbtns	是否显示头部右侧全部按钮	true	Boolean
is-show-frombtns	是否显示form表单按钮行	true	Boolean
show-summary	是否显示表格底部的合计行	false	Boolean
sum-text	合计行第一列默认文字	合计	String
summary-method	自定义合计计算方法（默认累加number类型数据）		Function		{ columns, data } = param
is-activity	是否为可活动表格（控件右上角可切换表格隐藏）	false	Boolean
loading	loading	false	Boolean
element-loading-text	loading说明文字数据加载中,请稍后...		String
pagination-position	分页器位置(top,bottom)	bottom	String
cell-draggable	是否允许单元格拖动	false	Boolean
table-tip	表格提示（鼠标悬浮显示）		String
action-form-height		action-form插槽高度	38	Number
header-height	标题行高度	38	Number
height	表格组件高度	100%	Number,String
max-height	表格组件最大高度		Number
min-height	表格组件最小高度		Number
footer-height	分页器高度(pagination-position为bottom时，即分页器位置在底部时有效)	32	Number
loading-type	加载loading的动画效果(默认原效果，新增animation选项，在刷新出体现loading动画，小视觉效果)	icon	String
cell-line-height	单元格行高	28px	Number
shortcut-column-handler	自定义便捷操作列的方法，可在外部自定义显示/隐藏时显示的列(仍会触发图标切换和shortcut-column-switch事件)	Function
enter-cellmoves-direction	回车键选中单元格向下移动

Table Events（事件）

事件名	作用	参数
page-loading	初始化请求时/请求失败时触发	初始化请求true/请求失败false
ondblclick	双击单元格时触发	row, col, cell, grid, noVisibleCols, index
config-tab-changed	表格配置切换到权限时触发
multiple-change	组件编辑有多选下拉框时，多选值被修改时抛出	val,row
shortcut-column-switch	表格切换/隐藏默认设置隐藏的列的时候触发	当前隐藏/显示的状态, cols
switch-hide-column	点击表头单独隐藏列时触发	column, columns
cell-click	点击单元格触发	row, column, cell, event

Table Methods（方法）

事件名	作用	参数	返回
search	执行搜索函数	当前条件
getSelectedRows	获取选择的数据		datas
toggleTableShow	设置表格内容显示或隐藏	true（显示）/false（隐藏）/无参数（隐藏、显示切换）
checkRow	选中单行数据	index(Number类型，不设置时默认选中第一行数据，设置index时显示设置的行数据)
reFMHeight	当formModule模块在外部切换其高度时,或表格外部布局调整时可能需要调用此方法重新布局表格高度。
getChangedData	获取修改过的数据		datas

Table Slot(插槽)

插槽名	说明
header	标题的solt形式嵌入
action-form	顶部搜索栏(按钮组下方,存在该插槽时has-znl-actions参数必需为true)
from-module	表格中插入表单（或其他）插槽
znl-footer-slot	底部插槽
from-content	表单按钮行中间插槽，适用于存放其他按钮，下拉、输入框等
heading-slot	表头slot

Cloumn (列配置)

属性名	作用	默认值	类型	是否必须	参数
visible	是否显示		Boolen	yes
className	列类名		String
align	单元格对齐方式(left,right,center)	left	String
name	列字段		String
isReadOnly	是否只读	true	Boolen
dataType	数据类型	String-1,Number-2,Object-3, Date-4,Boolean-5,Array-6	Number	yes
showDropDown	数据是否以下拉框方式显示（需配置dataMap）	false	Boolen
dataMap	如果数据是下拉选择数据需配置该属性		Array
binding	列绑定字段		String	yes
header	列名		String
width	列宽度		Number	yes
isFieldSearch	该列是否允许搜索	false	Boolean
isSystem	是否系统配置(系统配置不显示，用户不可修改)	false	Boolean
multiple	是否为多选下拉框	false	Boolean
mapping	为多选下拉框时，选项字段（包含在数据itemSource中,字段绑定数组，列binding绑定String）		String
separator	数据显示分隔符	/	String
IsUpperCase	该列数据编辑时是否转换为大写	false	Boolean
renderCell	单元格渲染方法		Function		h, cellObj{row,column, columnIndex}
headerElement	表头渲染方法		Function
buttons	自定义渲染的按钮,需返回数组[{content, icon,click()}]		Function / Array		row, colunm
elements	自定义html渲染,需返回数组		Function		currentValue, {row, column, columnIndex}
isCheckedColumn	是否为选择列		Boolean
IsUpperCase	该列在编辑输入时是否转换为大写	false	Boolean
hasRole	是否有权限查看该列，无权限时全部展开后不会显示该列	false	Boolean
customFilter	自定义数据过滤方法		Function(value, column, row)
renderHeader	表头渲染方法		Function(h)

item-source中包含字段isReadOnly为true时该行只读（不可编辑）

isReadOnly 行不可编辑 DisplayEdit 正行允许编辑（当列不可编辑时设置该属性可使行可编辑） ReadOnlyBindings Arrat 当前行可编辑时，该参数决定不可编辑的列

column.buttons配置

属性名	作用	默认值	类型	是否必须
content	按钮显示文字的内容		String	yes
className	类名		String
when	是否显示	true	[Function, Boolean]
click	点击方法		Function

column.elements配置

属性名	作用	默认值	类型	是否必须
name	显示元素		String	yes
click	单击事件		Function
mouseenter		鼠标移入事件	Function
mouseleave		鼠标移出事件	Function

rightMenus右键菜单配置选项

属性名	作用	默认值	类型	是否必须
iconName	字体图标		String
text	显示内容		String	yes
display	是否显示	true	Boolean
click	触发函数		Function

znl-vue-ui-new

正能量vue组件库

完整引入

按需引入

Table of Contents

znl-gridmodule

基础表格 (demo)

可编辑表格 (demo)

灵活的列配置 (demo)

Table Attributes (属性)

Table Events（事件）

Table Methods（方法）

Table Slot(插槽)

Cloumn (列配置)

item-source中包含字段isReadOnly为true时该行只读（不可编辑）

column.buttons配置

column.elements配置

rightMenus右键菜单配置选项

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

znl-vue-ui-new

正能量vue组件库

完整引入

按需引入

Table of Contents

znl-gridmodule

基础表格 (demo)

可编辑表格 (demo)

灵活的列配置 (demo)

Table Attributes (属性)

Table Events（事件）

Table Methods（方法）

Table Slot(插槽)

Cloumn (列配置)

item-source中包含字段isReadOnly为true时该行只读（不可编辑）

column.buttons配置

column.elements配置

rightMenus右键菜单配置选项

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads