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>