0.3.4 • Published 8 months ago
meixidialogtablecheck v0.3.4
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>
0.3.4
8 months ago
0.3.2
12 months ago
0.3.3
12 months ago
0.3.0
1 year ago
0.2.9
1 year ago
0.3.1
1 year ago
0.2.8
1 year ago
0.2.7
1 year ago
0.2.6
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.9
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.1.6
1 year ago
0.1.5
1 year ago
0.1.4
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago