数据表格

主要实现数据页面效果的代码文件

介绍

通过二次封装 NavieUI 数据表格，提升CRUD效率，但往往可能因人而异，并不是所有人都喜欢这种开发方式，因此若有修改结构冲动。请参考 NavieUI 数据表格

API

Slot

名称	说明
btn	头部按钮、如创建按钮与筛选按钮连接
empty	加载头部按钮之后、如搜索框

Props

名称	类型	说明
search	Object	搜索参数
url	string	请求url
minHeight	Number	最小高度
maxHeight	Number	最大高度
handle	Array<DataTableBtn>	表单按钮方法参数
subHeight	Number	减去当前数值高度
isSelection	boolean	是否可选，默认 true
bordered	boolean	是否显示border，默认true
scrollX	Number	表格内容的横向宽度，如果列被水平固定了，则需要设定它

Search

搜索参数对象格式。

例如：

let search = reactive({
    phone: '',
    username: '',
})

URL

• 访问数据接口的具体地址

• 必填项

配置方式通过.env 文件中的 APP_URL + URL 实现。

如：.env 中 APP_URL = http://localhost:3000/ url="api/test"

则TableData中请求数据接口为：http://localhost:3000/api/test

Handle 按钮

• 按钮数据的处理方法

• 默认查看、编辑2个按钮

按钮参数格式

interface BtnType {
  size?: SizeType | string,
  emitFunction: string,
  text: string | Function | any,
  type?:BtnTypeStr| string
}

示例如下：

{
  size: 'small',
  emitFunction: "view",
  type: 'info',
  text: "编辑",
}

追加按钮方式

通过 this._handleBtn[0].NButtons.push 实现。

添加参数需要按钮按钮参数格式

示例如下：

const changePassword = {
    type: 'error',
    text: '修改密码',
    emitFunction: 'changePassword'
}
this._handleBtn[0].NButtons.push(changePassword);
this._handleBtn[0].width = 280;

修改按钮属性

通过操作数组 this._handleBtn[0].NButtons 实现。

示例如下：

this._handleBtn[0].NButtons[0].text = '查看2'