表格加上表格头部的搜索封装-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
searchTable.vue
<template>
<div class="searchTable">
<TableHeaderVue
v-if="showHeadSearch"
:searchCdt="searchCdt"
:total="searchTotal"
:searchValue="complexParamSearch"
/>
<div class="tableMain" :class="{ showHeight: showHeadSearch }">
<!-- <slot></slot> -->
<div class="header">
<div class="name">
<el-button type="primary" @click="addStandard" v-if="tableObj.addbtn"
>+ {{ tableObj.addTitle }}</el-button
>
<div v-else>列表展示</div>
</div>
<div class="searchInput">
<el-input
:disabled="showHeadSearch"
maxlength="20"
placeholder="日期查询"
v-model.trim="searchValue"
class="input"
style="width: 400px"
@keyup.enter.native="searchFn"
clearable
>
<el-button
slot="append"
icon="el-icon-search"
@click="searchFn"
></el-button>
</el-input>
<el-button class="gaojisearch" @click="superSearchFn"
>高级查询</el-button
>
</div>
</div>
<div class="tablecontent">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="light"
style="width: 100%"
:height="570"
:header-cell-style="{
background: 'rgba(250, 250, 250, 1)',
height: '50px',
color: 'rgba(26, 26, 26, 1)',
fontWeight: '700',
}"
:row-style="{
height: '50px',
color: 'rgba(26, 26, 26, 1)',
}"
@selection-change="handleSelectionChange"
>
<el-table-column
v-for="(item, index) in tableObj.tableColumn"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
>
<template slot-scope="scope">
<div v-if="item.type == 'text'">
{{ scope.row[item.prop] }}
</div>
<div v-if="item.type == 'btnhandler'">
<template v-for="(btn, index) in item.btnList">
<span
:key="index"
class="blueColor pointer"
:class="{ redColor: btn.btnLable == '删除' }"
@click="handleClick(scope.row, btn.buttonClick)"
>{{ btn.btnLable }}</span
>
<el-divider
direction="vertical"
:key="index"
v-if="item.btnList.length > index + 1"
></el-divider>
</template>
</div>
</template>
</el-table-column>
<!-- <el-table-column
prop="name"
label="产品名称"
width="240"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column
prop="code"
label="数量"
width="160"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">{{ scope.row.number }}</template>
</el-table-column>
<el-table-column
prop="number"
label="单位"
width="120"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">{{ scope.row.unit }}</template>
</el-table-column> -->
</el-table>
</div>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="tableObj.paginationObj.currentPage"
:page-sizes="[10, 50, 100, 200]"
:page-size="tableObj.paginationObj.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableObj.paginationObj.total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import TableHeaderVue from "./tableHeader.vue";
import http from "@/utils/request";
export default {
name: "searchTable",
components: { TableHeaderVue },
props: ["searchCdt", "tableObj", "searchTotal"],
data() {
return {
showHeadSearch: false,
searchValue: "", //input查询的条件
complexParamSearch: "",
multipleSelection: [],
searchInfo: {}, //高级查询的查询条件
tableData: [],
};
},
// inject: ["getTableData"],
computed: {},
created() {
this.getTableData();
},
mounted() {},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.$emit("pageChange", val, "size");
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.$emit("pageChange", val, "current");
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
//新增操作
addStandard() {
this.$emit("addStandardFn");
},
//高级筛选
searchFn() {
this.complexParamSearch = this.searchValue;
let obj = {
current: 1,
};
console.log(this.complexParamSearch, "this.complexParamSearch");
this.getTableData(this.searchInfo, obj, this.complexParamSearch);
},
superSearchFn() {
this.showHeadSearch = !this.showHeadSearch;
if (!this.showHeadSearch) {
const searchInfo = {};
this.searchTotal = 0;
let obj = {
current: 1,
};
this.getTableData({}, obj, this.complexParamSearch);
}
},
//让后端接口返回post类型
getTableData(searchInfo, obj, searchValue) {
let { tableObj } = this;
if (obj) {
this.tableObj.paginationObj.currentPage = obj.current;
}
let searchInfoFormat = {};
if (searchInfo) {
const { createTime, ...other } = searchInfo;
searchInfoFormat = {
...other,
};
if (createTime?.length) {
searchInfoFormat.createStartTime = createTime[0];
searchInfoFormat.createEndTime = createTime[1];
}
}
this.searchInfo = searchInfoFormat;
http({
method: "post",
url: `${tableObj.apiFun.url}`,
data: {
...searchInfoFormat,
complexParam: this.showHeadSearch ? null : searchValue,
page: this.currentPage,
size: this.pageSize,
},
})
.then((res) => {
if (res.code == 0) {
this.tableData = res.data.records;
this.tableObj.paginationObj.total = res.data.total;
if (searchInfo) {
this.searchTotal = res.data.total;
}
} else {
this.$message.error(res.msg);
}
})
.catch((err) => {
console.log(err);
});
},
handleClick(row, method) {
if (method) {
method(row);
}
},
},
provide() {
return {
getTableData: this.getTableData,
};
},
};
</script>
<style scoped lang="less">
@import "~@/assets/less/table.less";
.searchTable {
height: 100%;
width: 100%;
.showHeight {
height: calc(100% - 80px) !important;
}
.tableMain {
border-radius: 2px;
background: rgba(255, 255, 255, 1);
border: 1px solid #e4e7ed;
border-top: 1px solid transparent;
.tablecontent {
// border-top: 1px solid rgba(217, 217, 217, 1);
// border-bottom: 1px solid rgba(217, 217, 217, 1);\
border-top: 1px solid rgba(217, 217, 217, 1);
max-height: 550px !important;
padding: 16px;
.el-table {
}
}
}
}
</style>
引入如上封装的组件
<template>
<div class="productStandard">
<SearchTableVue
ref="searchTableRef"
:tableObj="tableObj"
:searchCdt="searchCdt"
:searchTotal="searchTotal"
@addStandardFn="addStandardFn"
@pageChange="pageChange"
>
</SearchTableVue>
<!-- <tableHeader
v-if="showHeadSearch"
:searchCdt="searchCdt"
:total="searchTotal"
:searchValue="complexParamSearch"
/>
<div class="tableMain" :class="{ showHeight: showHeadSearch }">
<div class="header">
<div class="name">
<el-button type="primary" @click="addStandard"
>+ 新增协会账号</el-button
>
</div>
<div class="searchTable">
<el-button class="gaojisearch" @click="superSearchFn"
>高级查询</el-button
>
</div>
</div>
<div class="table">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="light"
style="width: 100%"
:height="570"
:header-cell-style="{
background: 'rgba(250, 250, 250, 1)',
height: '50px',
color: 'rgba(26, 26, 26, 1)',
fontWeight: '700',
}"
:row-style="{
height: '50px',
color: 'rgba(26, 26, 26, 1)',
}"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="序号" width="120">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column
prop="name"
label="账户类型"
width="250"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">{{ scope.row.type }}</template>
</el-table-column>
<el-table-column label="账户手机" :show-overflow-tooltip="true">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column
label="注册时间"
width="250"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">{{ scope.row.num }}</template>
</el-table-column>
<el-table-column
label="所属企业名称"
width="250"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">{{ scope.row.num }}</template>
</el-table-column>
<el-table-column label="账号状态" fixed="right" width="160">
<template slot-scope="scope">
<el-switch
v-model="scope.row.enableStr"
active-value="1"
inactive-value="0"
active-color="rgba(22, 93, 255, 1)"
inactive-color="rgba(242, 243, 245, 1)"
@change="onChange($event, scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column
prop="handler"
label="操作"
fixed="right"
width="249"
>
<template slot-scope="scope">
<div>
<span class="blueColor pointer" @click="edit(scope.row)"
>编辑</span
>
<el-divider direction="vertical"></el-divider>
<span class="blueColor pointer" @click="resetPsw(scope.row)"
>重置密码</span
>
<el-divider direction="vertical"></el-divider>
<span class="blueColor pointer" @click="see(scope.row)"
>查看</span
>
<el-divider direction="vertical"></el-divider>
<span class="redColor pointer" @click="del(scope.row)"
>删除</span
>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 50, 100, 200]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div> -->
<ViewAccount
ref="viewAccountRef"
:searchInfo="searchInfo"
:searchValue="complexParamSearch"
:currentPage="currentPage"
/>
<AddAccount
ref="addAccountRef"
:searchInfo="searchInfo"
:searchValue="complexParamSearch"
:currentPage="currentPage"
/>
<!-- :searchInfo="searchInfo"
:searchValue="complexParamSearch"
:currentPage="currentPage" -->
</div>
</template>
<script>
import tableHeader from "../components/tableHeader.vue";
import ViewAccount from "./components/viewAccount.vue";
import AddAccount from "./components/addAccount.vue";
import ResetPswPage from "../../views/dealerManagement/components/resetPsw.vue";
import http from "@/utils/request";
import SearchTableVue from "../components/searchTable.vue";
export default {
name: "",
components: {
tableHeader,
AddAccount,
ViewAccount,
ResetPswPage,
SearchTableVue,
},
data() {
return {
tableData: [],
multipleSelection: [],
currentPage: 1,
pageSize: 10,
searchValue: "",
complexParamSearch: "",
shzt: false,
showHeadSearch: false,
searchTotal: 0,
total: 0,
contractOptions: [
{ label: "开启", value: 1 },
{ label: "关闭", value: 2 },
],
deliveryList: [],
searchInfo: {},
};
},
computed: {
//搜索条件
searchCdt() {
return [
{
type: "select",
placeholder: "请选择",
label: "",
prop: "status",
options: this.contractOptions,
},
{
type: "input",
placeholder: "请输入",
label: "产品名称",
prop: "name",
},
{
type: "date",
placeholder: "开始日期",
placeholder1: "结束日期",
label: "注册时间",
prop: "createTime",
},
{
type: "input",
placeholder: "请输入",
label: "所属企业",
prop: "num",
},
];
},
//表格的每一项
tableObj() {
return {
addTitle: "新增",
addbtn: true, //展示新增按钮,否则展示文本
tableColumn: [
{
type: "text",
label: "产品名称",
prop: "name",
},
{
type: "text",
label: "数量",
prop: "number",
},
{
type: "text",
label: "单位",
prop: "unit",
},
{
type: "text",
label: "创建日期",
prop: "unit",
},
{
type: "btnhandler",
label: "操作",
btnList: [
{
btnLable: "编辑",
condition: () => {
return true;
},
buttonClick: (row) => {
console.log(row, "row");
this.$refs.addAccountRef.openDrawer(true, row);
},
},
{
btnLable: "查看",
condition: () => {
return true;
},
buttonClick: (row) => {
console.log(row, "row");
this.$refs.viewAccountRef.openDrawer(true, row);
},
},
{
btnLable: "删除",
condition: () => {
return true;
},
buttonClick: (row) => {
this.$confirm("确定删除吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
http({
method: "get",
url: `/contract/delete?id=${row.id}`,
})
.then((res) => {
console.log(res);
if (res.code == 0) {
this.$message({
type: "success",
message: "删除成功",
});
let obj = {
current: 1,
};
this.$ref.searchTableRef({}, obj, null);
} else {
this.$message.error(res.msg);
}
})
.catch((err) => {
console.log(err);
});
})
.catch((err) => {
this.$message({
type: "info",
message: "取消删除操作",
});
});
},
},
],
},
],
paginationObj: {
total: 0,
currentPage: 1,
pageSize: 10,
},
apiFun: {
url: "/operationLog/page",
},
};
},
},
mounted() {},
methods: {
addStandardFn() {
this.$refs.addAccountRef.openDrawer(true);
},
pageChange(val, type) {
if (type == "size") {
this.pageSize = val;
this.getTableData(this.searchInfo, null, this.complexParamSearch);
} else {
this.currentPage = val;
this.getTableData(this.searchInfo, null, this.complexParamSearch);
}
},
},
// provide() {
// return {
// getTableData: this.getTableData,
// };
// },
};
</script>
<style scoped lang="less">
@import "~@/assets/less/table.less";
.productStandard {
height: 100%;
border-radius: 2px;
.showHeight {
height: calc(100% - 80px) !important;
}
/deep/.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
.name {
font-size: 16px;
font-weight: 700;
color: rgba(0, 122, 255, 1);
}
.searchInput {
display: flex;
.input {
width: 282px;
height: 32px;
margin-right: 8px;
.el-input-group__append {
background: rgba(255, 255, 255, 1) !important;
}
}
.gaojisearch.el-button--default {
border: 1px solid rgba(22, 109, 241, 1);
font-size: 14px;
line-height: 22px;
color: rgba(22, 109, 241, 1);
}
.el-button:focus,
.el-button:hover {
background-color: transparent;
}
}
}
}
</style>
点击高级查询才展示表格头部的搜索
自己做的简单的封装如有问题可以提出大家一起学习
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |