Nw-design NPM | npm.io

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