nw-design

基于element-ui封装的部分组件

install

npm i nw-design

引入

全局引入

在引入element之后，在main.js全局引入

import NwDesign from "nw-design";
Vue.use(NwDesign);

局部引入

import {NwTable} from 'nw-design'
export default {
  components: {
    NwTable
  }
}

组件

nw-table

nw-table是基于el-table二次封装的组件,主要用于展示本地数据表格和在线请求数据表格

props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | -------- | :----- | :----- | :----- | :----- | pageFormZore | 是否从0开始 | boolean | false | | url | 表格远程接口地址 | string | — | | request | 远程数据请求对象，暂定于实例化的axios对象 | object | — | | methods | 表格远程接口请求方法 | string| get/post | get | showSelection | 是否显示勾选框 | boolean | false/true | false | showRadio | 是否显示单选框 | boolean | false/true | false | radioKey | 单选框绑定的属性需要唯一值当showRadio为true的时候该属性必填 | string | — | — | showIndex | 是否显示序号 | boolean | true/false | true | searchParams | 查询参数 | object | — | {} | localData | 本地数据 | array | — | [] | columns | 表格列数据 | array | — | [] | searchParams | 查询参数 | object | — | {} | reserveSelection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） | boolean | false| | pagination | 是否显示分页(本地数据和远程数据均可自动分页) | boolen | true/false | true | pageSizes | 页码选择 | array |— | [10, 20, 30, 50] | pageAlign | 分页器水平对齐方式 | string | start(左对齐)/center(居中)/end(右对齐) | start | pagemap | 关于请求数据分页字段的映射 | object | — | {page: "page",size:"size"} | datamap | 关于数据返回字段映射 | object | — | {total: "total",list:"list"}
| pageLayout | 分页布局 | string | — |'total, sizes, prev, pager, next, jumper'
| psize | 每页多少条记录 | number | — | 10

以上为封装的table特有的属性，另外自动继承了el-table的其他属性，也可直接使用，关于el-table的events也可以直接使用。

methods

组件内部有很多方法，以_开头的统一定义为组件内部方法，尽量不要直接使用，暴露的方法有： | 方法名 | 说明 | 参数
| -------- | :----- | :----- | resetTable | 重置表格，包括将当前页重置为第一页 | — | refreshTable | 刷新表格，不重置当前页 | —

events

| 事件名 | 说明 | 参数
| -------- | :----- | :----- | radio-change | 当用户勾选单选框的时候触发的事件 | row

columns

关于表格列的格式基本同Table-column，只不过以对象的形式配置 eg：

{
  type: "expand",
  slot: "expand",
  width: 55,
  align: "ecnter"
},
{
  prop: "id",
  label: "商品id",
},
{
  prop: "name",
  label: "商品名称",
},
{
  prop: "desc",
  label: "描述",
}

组件的各种用法可在example.vue中查看

页面缓存

关于列表页和详情页的数据缓存，暂时使用keep-alive解决

nw-dialog

nw-dialog是基于el-dialog二次封装的组件,主要用于展示弹出框

props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | -------- | :----- | :----- | :----- | :----- | showFooter | 是否显示尾部 | boolean | true/false | false | showOk | 是否显示确定按钮 | boolean | true/false | false | okText | 确定按钮文字 | string | 确定 | — | showCancel | 是否显示取消按钮 | boolean | true/false | false | cancelText | 取消按钮文字 | string | 取消 | — | autoClose | 点击取消是否自动关闭弹框 | boolean | true/false | true | autoDestroy | 弹框隐藏是否自动销毁组件 | boolean | true/false | false | footerAlign | 尾部按钮对齐方式 | string | start/center/end | end

以上为封装的table特有的属性，另外自动继承了el-table的其他属性，也可直接使用，关于el-table的events也可以直接使用。

methods

组件内部有很多方法，以_开头的统一定义为组件内部方法，尽量不要直接使用，暴露的方法有： | 方法名 | 说明 | 参数
| -------- | :----- | :----- | show | 显示弹框 | — | hide | 隐藏弹框 | —

events

| 事件名 | 说明 | 参数
| -------- | :----- | :----- | ok-click | 用户点击确定按钮的事件 | — | cancel-click| 当用户点击取消按钮触发 | —

其他props跟el-dialog组件一样