传递的数组解释

| 参数名 | 必选 | 类型 | 说明 | | :----------- | :--- | :------ | --------------------- | | 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;
};