meixiDialogTableCheck

如需项目开发中遇到弹窗勾选业务，可以使用该组件。

组件预览

其中红框选中位置为该组件实际渲染内容。

项目结构

  |-- lib ---------------------打包后文件
    |   |-- demo.html
    |   |-- index.d.ts
    |   |-- index.js
    |   |-- meixidialogtablecheck.common.js
    |   |-- meixidialogtablecheck.umd.js
    |   |-- meixidialogtablecheck.umd.min.js
    |   |-- config
    |       |-- dialogTableCheckControl.d.ts
    |       |-- dialogTableCheckControl.js
    |       |-- linkViewClass.d.ts
    |       |-- linkViewClass.js
    |       |-- type.d.ts
    |       |-- type.js
    |-- packages ---------------------项目主目录
    |   |-- .DS_Store
    |   |-- index.js
    |   |-- index.ts ---------------------入口文件
    |   |-- component ---------------------组件文件夹
    |   |   |-- dialogTableCheck.vue ---------------------vue工程文件
    |   |-- config ---------------------配置文件夹
    |   |   |-- dialogTableCheckControl.js
    |   |   |-- dialogTableCheckControl.ts ---------------------表格控制器
    |   |   |-- linkViewClass.js ---------------------同meixicomponent中的linkViewClass
    |   |   |-- linkViewClass.ts
    |   |   |-- type.js ---------------------类型文件
    |   |   |-- type.ts
    |   |-- mixins
    |       |-- dialogTableCheckMixins.js ---------------------用在表格组件中的混入

安装插件

npm install meixidialogtablecheck

组件导出内容

// index.ts
export {
    // 渲染的组件
    dialogTableCheck,
    // 对组件进行数据操控的类
    // 需要子类来继承该类
    DialogTableCheckControl
}

DialogTableCheckControl Api

抽象类 由于javascript无抽象类，可以通过子类继承该类来实现该类定义的方法

///子类在构造函数中需要重写的属性

// 对应后端返回表格数据中单条数据的唯一值id，例如：goodsId
this.rowKey = '';
// 如果表格中需要显示被选中的数量，则需要赋值的属性
this.checkKey = 'goodsNum';
// 表格的列配置，例如：
//{
// width: 150,
// label: '购买数量',
// key: 'goodsNum',
// template: true,
// lock:'right'
// }
this.tableConfig = [];

//  属性中的type类型可选为：single/multiple 分别对应单选与多选
this.tableCheckboxConfig = {
    value: [],
    type: 'multiple'
};

// 子类实例代码
//在子类构造函数中实现以下代码

// constructor(){
//    
// this.tableCheckboxConfig = {
// 需要回显之前勾选的值
//value: preTableValue,
//type: 'multiple'
//
// };
//   执行父类该方法
//   this.onStartInit()
//
//
// }

//调用获取数据的接口
// async requireResult(config) {
//     try {
//  
//         let res = await GetOrderCouponPage(config);
//         return new Promise((resolve, reject) => {
//             this.pageProps.total = res.total;
//             返回数据给表格
//             resolve(res.records);
//         });
//
//     } catch (error) {
//         console.log(error)
//         return new Promise((resolve, reject) => {
//             this.pageProps.total = 0;
//             resolve([]);
//         });
//     }
// }

// 该方法时当表格中存在input输入框时触发
// onGoodsInputValueChange = (row) => {
//     const { goodsNum, skuId } = row;
//
//     if (goodsNum) {
//         //  选中当前表格行
//         this.onCheckRowTableData(skuId);
//
//     } else {
//         //  取消选中当前行
//         this.unCheckRowTableData(skuId);
//     }
// };

dialogTableCheck Api

组件相关Api

props

| 参数 | 类型 | 默认值 | 可选值 | 描述 | |--------------------------|--------------------------|---------------------------------------------------------------|-----|------------------------------------------------------------| | height | String | 700px | | 表格高度 | | placeholder | String | 商品名称回车键搜索 | | 表格上输入框input的占位文字 | | screenList | Object | {index:0,list:[ {value:'all',label:'全部商品',key:'checkType'} ]} | | 对应表格上方的快捷筛选按钮，list为数组则渲染多个，被index下标对应的key与value会在调用接口时传入进去 | | dialogTableCheckControl | DialogTableCheckControl | | | |必传

emit 暂无

slot 插槽

参考以下代码

<dialogTableCheck
        :dialog-table-check-control='orderDialogCheckControl'
        style='height: 510px'
>
<!--  goodsNum  dialogTableCheckControl->tableConfig->{template:true 才会被动态渲染slot插槽}  -->
    <template #column-goodsNum='{scope}'>
        <base-number-input v-model='scope.goodsNum' :controls='true' :max='scope.canNum'
                           size='mini'
                           @onChange='orderDialogCheckControl.onGoodsInputValueChange(scope)'
        ></base-number-input>

    </template>
</dialogTableCheck>