数据表格

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

介绍

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

API

Slot

Props

搜索参数对象格式。

例如:

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

URL

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

  • 必填项

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

如:.envAPP_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'

Last updated