0.1.2 • Published 8 months ago
meixicheckgoodstable v0.1.2
meixicheckgoodstable
通过输入特定的商品名称来搜索商品并且回显至表格当中,目前仅有order订单系统中使用到了。
组件预览
项目结构
|-- lib ------------------------------------打包后目录
| |-- demo.html
| |-- index.d.ts
| |-- index.js
| |-- meixicheckgoodstable.common.js
| |-- meixicheckgoodstable.umd.js
| |-- meixicheckgoodstable.umd.min.js
| |-- control
| |-- checkGoodsBaseControl.d.ts
| |-- checkGoodsBaseControl.js
|-- packages ------------------------------------插件主要目录
| |-- index.js
| |-- index.ts ------------------------------------插件入口文件
| |-- component -----------------------------------组件文件夹/用来存放vue工程文件
| | |-- checkGoodsTable.vue
| |-- control ------------------------------------用来管理table的数据与配置
| |-- checkGoodsBaseControl.js
| |-- checkGoodsBaseControl.ts
安装
npm install meixicheckgoodstable
入口文件
//index.ts 该文件导出两个实例对象
export {
// vue组件,通过template 中html 标签使用渲染表格
checkGoodsTable,
// 控制器父类
// 由于js没有抽象类,可以通过子类来继承该类来实现
CheckGoodsBaseControl
}
CheckGoodsBaseControl 相关Api
interface CheckGoodsBaseControlInterface {
// 渲染至表格中的数据
tableData: any[],
// tableData 里面的每一个item的唯一key
onlyKey: string,
// 表格配置 {
//label: '选购商品名称',
//value: 'goodsName',
//template: true,
//width: 250
// }
tableHeaderConfig: any[],
// 添加数据至表格中的方法
addGoods: (goodsItem: object) => void
// 查找表格数据是否存在传入的数据
hasGoods: (goods: object) => number
// 组件调用后端接口的方法
getGoodsRequest: (queryString: string, callback: ([]) => void) => Promise<void>
//从表格中删除该数据
deleteGoods: (goods: object) => void
//通过key在表格数据中查找
getGoodsItemByOnlyKey: (key: string) => any
}
checkGoodsTable
props
属性 | 类型 | 默认值 | 可选值 | 描述 |
---|---|---|---|---|
preValue | Array | / | / | 需要预先渲染至表格的数据 |
control | CheckGoodsBaseControl | / | / | 必填 组件内部需要用到该参数来管理表格数据 |
placeholder | String | 输入商品名称进行搜索 | / | 在表格上方的input中显示的占位符 |
height | String | auto | 用来控制表格高度默认auto回根据表格内容来自动展开,如果需要自定义高度可以改为例子:200px 。一定要在数字后面加上px |
emit 事件
暂无
slot 插槽
<!--例如goodsName 是指在control-> tableHeaderConfig中存在一个key为goodsName并且template属性为true才会生效 -->
<checkGoodsTable>
<template v-slot:column-goodsName='{scope}'>
<base-text :content='scope.goodsName'></base-text>
</template>
</checkGoodsTable>