1.0.4 • Published 10 months ago
Last release10 months ago
传递的数组解释
| 参数名 | 必选 | 类型 | 说明 |
|---|
| field | 是 | Boolean | table prop 的标识 |
| label | 是 | Array | table 标题 |
| placeholder | 是 | Array | 提示语 |
| width | 是 | 方法 | table 列宽 |
| value | 是 | 方法 | 搜索、新增入参 |
| type | 是 | 方法 | 搜索、新增的类型 |
| props | 是 | 方法 | tree 类型的时候 props |
| isShowSearch | 是 | 方法 | 是否搜索 |
| isAdd | 是 | 方法 | 是否新增 |
| defaultValue | 是 | 方法 | 默认值 |
| disabled | 是 | 方法 | 是否禁用 |
头部搜索 FromSearch
<form-search v-model:showSearch="showSearch" ref="queryFormArea" :searchArr="hadleCol()" :queryParams="queryParams" @handleQuery="queryForm" @resetQuery="resetQuery"></form-search>
const hadleCol = () => {
return tableColumns.value.filter((item) => item.isShowSearch);
};
// 搜索条件的查询
const queryForm = (obj) => {
queryParams.value = { ...obj };
getList();
};
| 参数名 | 必选 | 类型 | 说明 |
|---|
| showSearch | 是 | Boolean | 是否显示 头部搜索组件 |
| searchArr | 是 | Array | 搜索数据选项的数组 |
| queryParams | 是 | Array | 搜索数据入参 |
| queryForm | 是 | 方法 | 查询数据方法 |
| resetQuery | 是 | 方法 | 重置方法 |
新增弹框
<addOrEditDialog :addOrEditForm="form" :dialog="showAddOrEditDialog" :searchArr="searchArr" :rules="rules" :addFun="addType" :editFun="editDept" @closeAddOrEdit="closeAddOrEdit" @changeAe="changeAe" />
自定义表格工具组件 RightToolbar
<right-toolbar v-model:showSearch="showSearch" :hideList="['setting', 'download']" @changeQueryForm="changeQueryForm" @queryTable="resetQuery" :searchArr="hadleCol()" ></right-toolbar>
// rightbar 查询
const changeQueryForm = (obj) => {
reset();
queryParams.value[obj.key] = obj.value;
getList();
};
const hadleCol = () => {
return tableColumns.value.filter((item) => item.isShowSearch);
};
分页组件 Pagination
<pagination :page-sizes="[20, 50, 100]" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
穿梭框选择组件
<tree-transfer :dialogVisible="dialogVisible" @confirmBind="confirmBind" @close="close" />
const confirmBind = (msg) => {
console.log(msg, 11123);
close();
};
const close = () => {
dialogVisible.value = false;
};