1.0.13 • Published 3 years ago

znl-vue-ui-new v1.0.13

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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)

Table of Contents

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初始化函数Functionyes
columns表格列配置Arrayyes
item-source表格数据[]Array
table-row-class-name表格行类名Function{row, rowIndex}
show-header是否显示标题行（兼容hasZnlBtns）Booleantrue
on-refresh刷新方法(存在时显示刷新按钮及右键刷新菜单)Function
on-save-setting设置方法（用于配置表格，存在时显示设置按钮及展开列按钮）Functioncolumns, pageSize
on-save-config单列设置方法Functioncolumns, pageSize
header标题
is-init是否用传入的初始化函数初始化组件trueBoolean
is-fields-search是否支持搜索falseBoolean
search-fields搜索条件（组件会监听这个传入的参数变化，传入搜索条件改变时触发onsearch）Object
on-search搜索方法Functionparams
on-page-changed翻页方法(存在时显示分页器)Function
page-size每页条数20Number
page-index当前页1Number
total-count总条数Number
action-btns顶部按钮组数据name:名称，iconName:图标，click:点击事件，tip: 提示文字Array
gridtype表格类型（action / base）baseString
is-multi-rows-check可否多选（多选情况下有第一列选择框）falseBoolean
is-multi-rows-check-fixed多选项是否冻结（默认冻结，建议弹框中使用时修改false,否则有不可预估的bug）trueBoolean
show-delete-row-right-menu是否显示右键删除按钮trueBoolean
show-save-btn是否存在保存按钮trueBoolean
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是否显示头部右侧全部按钮trueBoolean
is-show-frombtns是否显示form表单按钮行trueBoolean
show-summary是否显示表格底部的合计行falseBoolean
sum-text合计行第一列默认文字合计String
summary-method自定义合计计算方法（默认累加number类型数据）Function{ columns, data } = param
is-activity是否为可活动表格（控件右上角可切换表格隐藏）falseBoolean
loadingloadingfalseBoolean
element-loading-textloading说明文字 数据加载中,请稍后...String
pagination-position分页器位置(top,bottom)bottomString
cell-draggable是否允许单元格拖动falseBoolean
table-tip表格提示（鼠标悬浮显示）String
action-form-heightaction-form插槽高度38Number
header-height标题行高度38Number
height表格组件高度100%Number,String
max-height表格组件最大高度Number
min-height表格组件最小高度Number
footer-height分页器高度(pagination-position为bottom时，即分页器位置在底部时有效)32Number
loading-type加载loading的动画效果(默认原效果，新增animation选项，在刷新出体现loading动画，小视觉效果)iconString
cell-line-height单元格行高28pxNumber
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是否显示Boolenyes
className列类名String
align单元格对齐方式(left,right,center)leftString
name列字段String
isReadOnly是否只读trueBoolen
dataType数据类型String-1,Number-2,Object-3, Date-4,Boolean-5,Array-6Numberyes
showDropDown数据是否以下拉框方式显示（需配置dataMap）falseBoolen
dataMap如果数据是下拉选择数据需配置该属性Array
binding列绑定字段Stringyes
header列名String
width列宽度Numberyes
isFieldSearch该列是否允许搜索falseBoolean
isSystem是否系统配置(系统配置不显示，用户不可修改)falseBoolean
multiple是否为多选下拉框falseBoolean
mapping为多选下拉框时，选项字段（包含在数据itemSource中,字段绑定数组，列binding绑定String）String
separator数据显示分隔符/String
IsUpperCase该列数据编辑时是否转换为大写falseBoolean
renderCell单元格渲染方法Functionh, cellObj{row,column, columnIndex}
headerElement表头渲染方法Functionheader
buttons自定义渲染的按钮,需返回数组{content, icon,click()}Function / Arrayrow, colunm
elements自定义html渲染,需返回数组FunctioncurrentValue, {row, column, columnIndex}
isCheckedColumn是否为选择列Boolean
IsUpperCase该列在编辑输入时是否转换为大写falseBoolean
hasRole是否有权限查看该列，无权限时全部展开后不会显示该列falseBoolean
customFilter自定义数据过滤方法Function(value, column, row)
renderHeader表头渲染方法Function(h)

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

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

column.buttons配置

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

column.elements配置

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

rightMenus右键菜单配置选项

属性名作用默认值类型是否必须
iconName字体图标String
text显示内容Stringyes
display是否显示trueBoolean
click触发函数Function
ui
cheerioclipboard-copyechartshighchartsresize-observer-polyfillunderscorevuevue-echarts-v3vue-highchartsvuedraggable
@infinitebrahmanuniverse/nolb-zn@everything-registry/sub-chunk-3237
1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.0

3 years ago