概要

如何使用vue封裝列表高級查看，表格多種配置使用

h-table的封裝過程

（1）高級查詢
（2）table表格
（3）tool工具設置欄

三大組件共同合成封裝表格組件

查詢組件封裝 h-highForm

<template><div class="high-form"><!-- 左側篩選查詢 --><el-inputplaceholder="請輸入內容"v-model="inputValue"@keydown.enter.native="search"class="input-with-select"><el-selectclass="el-select"v-model="selectValue"slot="prepend":placeholder="selectList && selectList.length > 0 ? selectList[0].label : '暫無數據'"><el-optionv-for="v in selectList":key="v.value":label="v.label":value="v.value"></el-option></el-select><!-- 清除按鈕 --><islot="suffix"v-if="inputValue"@click="leftClear"class="el-input__icon el-icon-circle-close"></i></el-input><!-- 外面的查詢按鈕 --><el-button type="primary" @click="search" class="query-button-custom">查詢</el-button><!-- 右側高級查詢表單 --><zy-dropdowntrigger="click"placement="bottom"ref="dropDown"width="500"v-show="showSearch"v-if="highForm.length > 0":hide-on-click="false"@visible-change="visibleChange"><el-button>{{isShowDropdown? "收起查詢": count? `高級查詢(${count})`: "高級查詢"}}<i:class="isShowDropdown? 'el-icon-arrow-up el-icon--right': 'el-icon-arrow-down el-icon--right'"></i></el-button><el-dropdown-menu slot="dropdown" :class="isTabItem ? 'nav-info' : ''"><el-button type="text" class="query-title">高級查詢</el-button><el-form:model="model"ref="ruleForm"class="form-content"label-width="120px"><el-rowv-for="(items, index) in highForm":key="`highForm` + index"class="el-row-box"><el-col:span="items.length <= 1 ? 24 : 12"v-for="i in items":key="i.prop"><el-form-itemv-if="i.definite != false":label="`${i.label}:`":prop="i.prop"><el-selectv-if="i.type === 'select'"style="width: 240px"v-model="model[i.prop]":placeholder="i.placeholder ? i.placeholder : `請選擇${i.label}`":remote="i.remote ? i.remote : false":remote-method="i.remoteMethod":multiple="i.multiple ? i.multiple : false":collapse-tags="i.collapseTags ? i.collapseTags : true"@blur="selectBlur($event, i)"@focus="selectFocus($event, i)"@change="selectChange($event, i)"popper-class="popper-class":popper-append-to-body="true"filterableclearable><el-optionv-for="(j, k) in i.optList":key="k":label="j[i.options && i.options.label ? i.options.label : 'label']":value="j[i.options && i.options.value ? i.options.value : 'value']"><div class="el-select__text" v-overflow-tooltip>{{j[i.options && i.options.label? i.options.label: "label"]}}</div></el-option></el-select><el-cascaderv-else-if="i.type === 'cascader'"style="width: 240px"v-model="model[i.prop]":props="i.options ? i.options : null":options="i.optList":collapse-tags="i.collapseTags ? i.collapseTags : true":filterable="i.filterable ? i.filterable : true":placeholder="i.placeholder ? i.placeholder : `請選擇${i.label}`"@change="cascaderChange"@expand-change="expandChange"clearable:append-to-body="true"></el-cascader><el-date-pickerv-else-if="i.type == 'year' ||i.type == 'month' ||i.type == 'date' ||i.type == 'dates' ||i.type == 'months' ||i.type == 'years' ||i.type == 'week' ||i.type == 'datetime'"style="width: 240px"v-model="model[i.prop]":type="i.type":placeholder="i.placeholder ? i.placeholder : `請選擇${i.label}`":pickerOptions="i.pickerOptions ? i.pickerOptions : pickerOptions":value-format="i.format":format="i.type == 'week' ? 'yyyy 第 WW 周' : ''"@change="singleChange":append-to-body="true"popper-class="date-picker-pop"></el-date-picker><el-date-pickerv-else-if="i.type == 'daterange' ||i.type == 'monthrange' ||i.type == 'datetimerange'"style="width: 240px"v-model="model[i.prop]":type="i.type"range-separator="至":start-placeholder="i.startPlaceholder ? i.startPlaceholder : '開始時間'":end-placeholder="i.endPlaceholder ? i.endPlaceholder : '結束時間'":pickerOptions="i.pickerOptions ? i.pickerOptions : pickerOptions":value-format="i.format":append-to-body="true"popper-class="date-picker-pop"></el-date-picker><el-time-pickerv-else-if="i.type === 'timePicker'":placeholder="i.placeholder ? i.placeholder : `請選擇${i.label}`"v-model="model[i.prop]"style="width: 100%"popper-class="date-picker-pop"></el-time-picker><el-switchv-else-if="i.type == 'switch'"v-model="model[i.prop]"></el-switch><el-radio-groupv-else-if="i.type == 'radio'"v-model="model[i.prop]"><el-radiov-for="(j, k) in i.optList":label="j":key="k"></el-radio></el-radio-group><el-checkbox-groupv-else-if="i.type == 'checkbox'"v-model="model[i.prop]"><el-checkboxv-for="ch in i.checkboxs":label="ch.value":key="ch.value">{{ ch.label }}</el-checkbox></el-checkbox-group><el-inputv-elsestyle="width: 240px":type="i.type"clearablev-model="model[i.prop]":maxlength="i.maxlength":placeholder="i.placeholder ? i.placeholder : `請輸入${i.label}`"></el-input></el-form-item></el-col></el-row></el-form><slot name="operate"><div class="footer"><el-button type="primary" size="mini" @click="search">查詢</el-button><el-button size="mini" @click="reset">重置</el-button></div></slot></el-dropdown-menu></zy-dropdown></div>
</template>
<script>
import ZyDropdown from "./dropdown.vue";
export default {name: "zy-high-form",components: { ZyDropdown },props: {isTabItem: {type: Boolean,default: false,},// 搜索配置formConfig: {type: Array,default: () => [],},// 默認查詢數據，如果沒有默認數據，可不傳params: {type: Object,default: () => {},},// 是否展示高級搜索showSearch: {type: Boolean,default: () => true,},autoParams: Function,},data() {return {//高級查詢展示/隱藏isShowDropdown: false,pickerOptions: {disabledDate: (time) => {const day = 365 * 24 * 3600 * 1000; // 31536000000// 返回小于當前日期并近一年內的日期return (time.getTime() > Date.now() ||time.getTime() < Date.now() - 8.64e7 - day);},},// 查詢數據源model: {},// 下拉框的值selectValue: "firstKeyWord",// 輸入框的值inputValue: "",// 已選數量count: 0,};},created() {// 在組件掛載后設置日期選擇器的z-index樣式const datePickerPop = document.querySelector(".date-picker-pop .el-picker-panel");if (datePickerPop) {datePickerPop.style.zIndex = 2000;}this.resetModel();},computed: {//左側下拉框selectList() {const list = [{ label: "全部", value: "firstKeyWord" }];for (let i = 0; i < this.formConfig.length; i++) {const item = this.formConfig[i];if (item.nimble == true) {const key = item.prop;const capitalizedFirst = key[0].toUpperCase();const rest = key.slice(1);const text = capitalizedFirst + rest;list.push({label: item.label,value: `first${text}`,});}if (list.length > 6) break;}return list;},//處理搜索樣式searchParams() {const model = JSON.parse(JSON.stringify(this.model));//對于非規則數據結構，支持自定義整理數據結構if (this.autoParams) {return this.autoParams(model);}for (let i = 0; i < this.formConfig.length; i++) {const config = this.formConfig[i];// 對時間范圍數據結構進行處理if (config.type &&(config.type == "daterange" ||config.type == "monthrange" ||config.type == "datetimerange")) {if (model[config.prop] && model[config.prop].length > 1) {model[config.prop + "BeginDate"] = model[config.prop][0];model[config.prop + "EndDate"] = model[config.prop][1];}delete model[config.prop];}}return model;},//高級查詢數量highForm() {const list = [];let items = [];for (let i = 0; i < this.formConfig.length; i++) {const item = this.formConfig[i];if (items.length > 1) {list.push(items);items = [];}if (item.definite != false) {items.push(item);}}if (items.length != 0) {list.push(items);}return list;},},watch: {selectValue: {deep: true,immediate: true,handler(newVal, oldVal) {if (oldVal) {this.model[oldVal] = "";}if (newVal) {this.model[newVal] = this.inputValue;}},},inputValue(newVal) {this.model[this.selectValue] = newVal;},params: {deep: true,immediate: true,handler() {this.mergeModel();},},formConfig: {deep: true,immediate: true,handler(val) {//如果配置發生了變化，重置數據if (val && Object.keys(val).length != val.length) {this.initData();}},},},methods: {// 顯示菜單項showDropDown() {this.$refs.dropDown.show();},// 下拉框選中selectChange(event, i) {if (i.change) {i.change(event, i);}this.$emit("change", event, i);},selectBlur(e, config) {if (config.blur) {config.blur(e, config);}this.$emit("blur", e, config);//下拉框需要刷新才能展示tooltipthis.$forceUpdate();},selectFocus(e, config) {if (config.focus) {config.focus(e, config);}this.$emit("focus", e, config);//下拉框需要刷新才能展示tooltipthis.$forceUpdate();},// 選中日期expandChange(val) {// if(val) {this.showDropDown();// }},// 級聯選擇器選中cascaderChange(val) {if (val) {this.showDropDown();}},// 日期單選singleChange(val) {if (val) {this.showDropDown();}},//點擊菜單項下拉框出現/隱藏visibleChange(val) {this.showNum();this.isShowDropdown = val;},// 左側清除按鈕leftClear() {this.inputValue = "";this.$nextTick(() => {this.search();});},// 高級查詢顯示已選項數量showNum() {let num = 0;for (let i = 0; i < this.formConfig.length; i++) {const prop = this.formConfig[i].prop;const value = this.model[prop];var numReg = /^[0-9]*$/;var numRe = new RegExp(numReg);const isNumber = numRe.test(value);if (!isNumber && (!value || value == "")) continue; // 如果對應值非數字并為空，則跳過if ((value instanceof Array && value.length > 0) || // 數組切有值(value && typeof value == "string" && value.length > 0) || // 字符串切有值(!isNaN(parseFloat(value)) && isFinite(value)) // 是否位數字或者布爾類型) {num++;}}this.count = num;},/*** 主要更新外部默認數據，當初始化/重置時外部默認數據發生表更時對數據進行合并*/mergeModel() {this.model = {...this.model,...this.params,};this.showNum();},/*** 這里主要處理組件內搜索初始數據，初始化/重置時調用*/resetModel() {const model = {firstKeyWord: "",};for (let i = 0; i < this.formConfig.length; i++) {const config = this.formConfig[i];model[config.prop] = config.multiple ? [] : "";if (config.nimble) {const key = config.prop;const capitalizedFirst = key[0].toUpperCase();const rest = key.slice(1);const text = "first" + capitalizedFirst + rest;model[text] = "";}// 當列表數據為空，而且傳了api則獲取API數據if ((!config.optList || config.optList.length == 0) && config.api) {config.api(config.params ? config.params : {}).then((res) => {config.optList = res.data;}).catch((err) => {console.log(err);});}}//設置模糊查詢數據model[this.selectValue] = this.inputValue;this.model = {...model,...this.params,};this.showNum();},initData() {for (let i = 0; i < this.formConfig.length; i++) {const config = this.formConfig[i];// 當列表數據為空，而且傳了api則獲取API數據if ((!config.optList || config.optList.length == 0) && config.api) {config.api(config.params ? config.params : {}).then((res) => {config.optList = res.data;}).catch((err) => {console.log(err);});}}},reset() {this.resetModel();this.$emit("reset");//為了避免數據沒及時更新，查詢做延遲setTimeout(() => {this.search();}, 200);},search() {this.$emit("search", this.searchParams);//顯示搜索數量和關閉彈窗this.visibleChange(false);this.$refs.dropDown.hide();},},
};
</script>
<style lang="scss" scoped>
.high-form {display: flex;margin-bottom: 20px;
}
.right-btn {float: right;
}
.high-form .query-button-custom {margin-right: 15px;
}
.query-title {height: 40px;background: #ffffff;font-size: 18px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 600;// color: #1768b4;line-height: 24px;margin: 0px 10px 10px 10px;cursor: default;
}
/* 設置彈出框的寬高 */
.el-dropdown-menu {width: auto;padding: 10px 0px 20px 20px;position: absolute;
}
// 左側輸入框
.input-with-select {width: 357px;height: 36px;border-radius: 4px;margin-right: 15px;.el-select {width: 120px;height: 34px;}::v-deep .el-input-group__prepend {height: 34px;background-color: #fff;}
}::v-deep .date-picker-pop {z-index: 2000 !important;
}
::v-deep .el-select__tags {flex-wrap: nowrap;overflow: hidden;margin-left: 1px;
}
.el-select__text {flex-wrap: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200px;
}
::v-deep .el-tag.el-tag--info {max-width: 150px;
}
::v-deep .el-select-dropdown {width: 240px;
}
.form-content {max-height: 500px;overflow-y: auto;
}
.el-row {max-width: 760px;height: 58.75px; //下拉框彈出會出現界面跳動的情況
}
.el-row-box {display: flex;flex-wrap: nowrap;
}
.footer {text-align: end;padding: 10px 20px 0 0;width: 100%;
}
::v-deep .el-form-item--medium .el-form-item__label {line-height: 18px;display: flex;justify-content: flex-end;align-items: center;height: 36px;
}
::v-deep .el-form--inline .el-form-item {line-height: 18px;
}
::v-deep .el-form-item {margin-right: 20px;
}
</style>

結果頁

右側工具欄封裝RightToolbar

<template><div class="top-right-btn" :style="style"><el-row><el-tooltipclass="item"effect="dark":content="__showSearch ? '隱藏搜索' : '顯示搜索'"placement="top"v-if="search"><el-buttonsize="mini"circleicon="el-icon-search"@click="toggleSearch()"/></el-tooltip><el-tooltipclass="item"effect="dark"content="刷新"placement="top"v-if="renew"><el-buttonsize="mini"circleicon="el-icon-refresh"@click="refresh()"/></el-tooltip><el-tooltipclass="item"effect="dark"content="顯隱列"placement="top"v-if="columns && menu"><el-buttonsize="mini"circleicon="el-icon-menu"@click="showColumn()"/></el-tooltip></el-row><el-dialog :title="title" :visible.sync="open" append-to-body><el-transfer:titles="['顯示', '隱藏']"v-model="value":data="columns"@change="dataChange"></el-transfer></el-dialog></div>
</template>
<script>
export default {name: "RightToolbar",data() {return {// 顯隱數據value: [],// 彈出層標題title: "顯示/隱藏",// 是否顯示彈出層open: false,__showSearch: true,};},props: {showSearch: {type: Boolean,default: true,},columns: {type: Array,},search: {type: Boolean,default: true,},gutter: {type: Number,default: 10,},//是否展示刷新按鈕renew: {type: Boolean,default: true,},menu: {type: Boolean,default: true,},},watch: {search: {immediate: true,handler(val) {if (val == false) {this.$nextTick(() => {this.__showSearch = true;this.toggleSearch();});}},},showSearch: {immediate: true,handler(val) {if (val != this.__showSearch) {this.__showSearch = val;}},},},computed: {style() {const ret = {};if (this.gutter) {ret.marginRight = `${this.gutter / 2}px`;}return ret;},},created() {// 顯隱列初始默認隱藏列for (let item in this.columns) {if (this.columns[item].visible === false) {this.value.push(parseInt(item));}}},methods: {// 搜索toggleSearch() {this.__showSearch = !this.__showSearch;this.$emit("update:showSearch", this.__showSearch);},// 刷新refresh() {this.$emit("queryTable");},// 右側列表元素變化dataChange(data) {for (let item in this.columns) {const key = this.columns[item].key;this.columns[item].visible = !data.includes(key);}},// 打開顯隱列dialogshowColumn() {this.open = true;},},
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {border-radius: 50%;padding: 12px;display: block;margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {margin-bottom: 10px;
}
</style>

結果頁

列表組件h-table

<template><div id="BasicTable"><zy-high-formv-if="showSearch":form-config="bindTableOptions.formConfig":auto-params="bindTableOptions.autoParams":show-search="showSearch":params="params"@search="__refreshList"@reset="__reset"@blur="highFormBlur"@focus="highFormFocus"@change="highFormChange"ref="searchForm"></zy-high-form><el-row v-if="$slots.header"><slot name="header" /></el-row><el-row><slot name="operator" /><right-toolbarv-if="bindTableOptions.showRightToolbar != null? bindTableOptions.showRightToolbar: true":showSearch.sync="showSearch":search="bindTableOptions.search":renew="bindTableOptions.refresh":menu="bindTableOptions.menu"@queryTable="__getList":columns="columns"></right-toolbar></el-row><el-tableref="table"v-bind="bindTableOptions":key="tableKey":row-key="rowKey":data="list"v-loading="loading"style="width: 100%"v-on="$listeners":header-cell-style="{ fontWeight: 'bold', color: '#333' }":default-sort="bindTableOptions.sortable ? bindTableOptions.sortable : {}"@sort-change="__onSortChange"@row-click="__rowClick"@selection-change="__handleSelectionChange"><templatev-for="(item, index) in bindTableOptions &&bindTableOptions.table.columns"><!-- 需要自定義表格列樣式 --><el-table-columnv-if="item.custom && item.visible && !item.columns"v-bind="item":min-width="item.minWidth || 150":key="item.prop"><template slot-scope="scope"><slot :name="item.prop" :row="scope.row" :column="item"> </slot></template></el-table-column><el-table-columnv-bind="item":min-width="item.minWidth || 150"v-if="!item.custom && item.visible && !item.columns":key="index"show-overflow-tooltip></el-table-column><el-table-columnv-if="item.visible && item.columns"v-bind="item":min-width="item.minWidth || 180":key="index"><template slot-scope="scope"><zy-tool:config="item":scope="scope"@click="__handleClickAction":key="toolKey"></zy-tool></template></el-table-column></template></el-table><div class="page_box" v-if="showPagination"><pagination:total="pagination.total":page.sync="pagination.pageNum":limit.sync="pagination.pageSize":page-sizes="pageSizes"@pagination="__getList"/></div></div>
</template><script>
import ZyTool from "./tool.vue";
export default {name: "zy-table",components: { ZyTool },props: {//搜索條件默認數據，如果沒有默認數據可以不填params: {type: Object,default: () => {},},//表格高度height: String,//是否展示底部分頁showPagination: {type: Boolean,default: true,},pageSizes: {type: Array,default: () => {return [10, 20, 30, 50, 100];},},pageSize: {type: Number,default: 10,},rowKey: {type: String,default: "id",},},data() {return {columns: [],tableKey: new Date().getMilliseconds(),loading: false,showSearch: true,// 分頁詳情pagination: {pageSize: this.pageSize,pageNum: 1,total: 0,},sort: {prop: "", //排序字段名order: "", // 排序方式},// 列表數據list: [],//行選中數據multipleSelection: [],//存在列表數據變更，操作欄數據沒變更的情況，因此這里設置keytoolKey: new Date().getTime(),};},computed: {bindTableOptions() {return {height: this.height ?? `calc(100vh - ${this.showSearch ? 298 : 240}px)`, // 根據是否隱藏搜索欄調整高度...this.$attrs,};},sortParams() {//如果排序字段不存在，則由服務端自主排訊if (!this.sort.order) return {};return {prop: this.sort.prop,order: this.sort.order == "ascending" ? "asc" : "desc",};},},watch: {columns: {deep: true,handler() {this.__resetColumns();},},showSearch: {deep: true,handler(val) {this.$emit("showChange", this.showSearch);},},"bindTableOptions.sortable": {deep: true,immediate: true,handler(val) {if (val) {this.sort = JSON.parse(JSON.stringify(val));}},},"bindTableOptions.multipleSelection": {deep: true,immediate: true,handler(val) {if (val) {const valStr = JSON.stringify(val);const selection = JSON.stringify(this.multipleSelection);if (valStr != selection) {this.multipleSelection = JSON.parse(valStr);}}},},},created() {this.columns = this.bindTableOptions.table.columns.map((v, i) => {return { key: i, label: v.label, visible: v.visible ?? true };});// 初始化搜索// 初始化搜索if (this.bindTableOptions.autoSearch != false) {this.$nextTick(() => {this.__getList();});}//如果配置不展示右上角的操作欄搜索功能，頂部的搜索同時不展示if (this.bindTableOptions.search == false) {this.showSearch = false;}},methods: {/*** 重置列隱藏設置*/__resetColumns() {// 遍歷設置列數據this.bindTableOptions.table.columns.forEach((v) => {// 遍歷隱藏/展示列設置數據this.columns.forEach((v2) => {// 對普通列同步隱藏/展示狀態if (v.label == v2.label) {v.visible = v2.visible;}});});this.$nextTick(() => {this.tableKey = new Date().getMilliseconds();});},__onSortChange({ prop, order }) {this.sort.prop = prop;this.sort.order = order;this.__getList();},//重置頁碼為1__refreshList() {this.pagination.pageNum = 1;this.__getList();},// 刷新列表__getList() {if (!this.bindTableOptions.api) return;const params = {...this.getModel(),...this.pagination,...this.sortParams,};//刪除總頁數delete params.total;this.loading = true;this.bindTableOptions.api(params).then((res) => {this.loading = false;// this.list = res.rows ? res.rows : this.handleTree(res.data);const rows = res.rows ? res.rows : res.data;this.list = rows;this.$emit("update-list", rows);this.$emit("update", res);this.toolKey = new Date().getTime();this.pagination.total = res.total;const selections = JSON.parse(JSON.stringify(this.multipleSelection));this.clearSelection();selections.forEach((row) => {this.toggleRowSelection(row, true);});}).catch((err) => {this.loading = false;});},// 點擊操作欄__handleClickAction(type, scope, btn) {//  對需要進行二次確認的進行二次確認。if (btn.confirm) {this.$confirm(btn.msg ? btn.msg : `您確定${btn.text}嗎？`, "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$emit("handleClickAction", type, scope, btn);}).catch(() => {});return;}this.$emit("handleClickAction", type, scope, btn);},/*** 選中行回調* @param {選中行源數據} row* @param {選擇列配置} column* @param {選中事件} event*/__rowClick(row, column, event) {//回調點擊行事件this.$emit("row-click", row, column, event);// 點擊表格行切換selection狀態if (this.bindTableOptions.rowClickSelection) {var result = this.multipleSelection.some((item) =>item[this.bindTableOptions.rowKey ?? "id"] ===row[this.bindTableOptions.rowKey ?? "id"]);this.toggleRowSelection(row, !result);}},/**** @param {發生變化的表格} selection*/__handleSelectionChange(selection) {this.multipleSelection = JSON.parse(JSON.stringify(selection));this.$emit("selection-change", this.multipleSelection);},/*** 數據重置，當沒有默認數據時可以不處理，如默認時間，需要在reset回調中重置默認時間*/__reset() {this.$emit("reset");},/*** 刷新數據* @param {是否重置頁碼} reset*/refresh(reset) {if (reset) {this.pagination.pageNum = 1;}this.__getList();},// 獲取表格實例getTableRef() {if (this.$refs.table) {return this.$refs.table;}},/*** 獲取搜索條件*/getModel() {if (this.$refs.searchForm) {return this.$refs.searchForm.searchParams;}return { ...(this.params ?? {}) };},/*** 獲取表格查詢結果*/getData() {return this.list;},/*** 對表格行進行選擇狀態設置* @param {操作行數據} row* @param {選中狀態} selection*/toggleRowSelection(row, selection = true) {this.$refs.table.toggleRowSelection(row, selection);},clearSelection() {this.$refs.table.clearSelection();},highFormBlur(event, config) {this.$emit("blur", event, config);},highFormFocus(event, config) {this.$emit("focus", event, config);},highFormChange(event, config) {this.$emit("change", event, config);},},
};
</script><style lang="scss" scoped>
.page_box {margin-top: 20px;
}
.dropdown-menu-btn {margin-top: 2px !important;
}
::v-deep .el-table__empty-block {width: 100%;min-width: 100%;max-width: 100%;// padding-right: 100%;
}
::v-deep .el-table__empty-text {line-height: normal;
}
.el-button + .el-button {margin-left: 10px;
}
.el-table {margin-top: 10px;
}
</style>

結果頁

vue頁面使用

<template><div class="app-container"><zy-tableref="ZYTable"v-bind="tableOptions"@handleClickAction="handleClickAction"><template #operator><el-buttontype="primary"plainsize="small"icon="el-icon-plus"@click="handleAdd"v-hasPermi="['marketing:agent:add']">新增經紀人</el-button></template></zy-table><!-- 編輯經紀人 --><edit-dialogref="dialog"@refresh="refresh"></edit-dialog></div>
</template><script>
import columns, { formConfig } from "./table-config";
import { getAgentList,deleteAgent} from "@/api/marketing/agent";
import EditDialog from "./edit.vue";
export default {name: "Agent",components: {EditDialog},data() {return {tableOptions: {table: columns,api: getAgentList,formConfig: formConfig,},};},activated() {this.refresh()},methods: {handleClickAction(type, scope, btn) {switch (type) {case "edit":this.handleEdit(scope.row);break;case "delete":this.handleDelete(scope.row);break;}},// 新增handleAdd() {this.$refs.dialog.open(false);},// 編輯handleEdit(row) {this.$refs.dialog.open(true,row);},// 刪除handleDelete(row) {deleteAgent({ activityReBrokerId: row.id }).then(res => {this.refresh();this.$message.success("刪除成功!");})},refresh() {this.$refs.ZYTable.refresh();},},
};
</script><style lang="scss" scoped>
::v-deep .fileUrl {.cell {padding: 2px 0;display: flex;align-items: center;justify-content: center;.el-image__error {padding: 0 10px;font-size: 12px;}}
}
</style>

js文件

import { getConfigList } from "@/api/marketing/configuration";
import { emptyTextFormatter } from "@/utils/tableFormatter";// 操作列
export const actionColumns = [{text: "編輯",event: "edit",type: "text",has: "marketing:agent:edit",},{text: "刪除",event: "delete",type: "text",has: "marketing:agent:delete",confirm: true,msg: "您確定刪除該經紀人信息嗎?",},
];// 表格列
const tableColumns = [{type: "index",label: "序號",width: "60",align: "center",},{prop: "name",label: "姓名",minWidth: "120","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "phone",label: "聯系電話",minWidth: "120","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "marketActivityName",label: "所屬項目",minWidth: "200","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "channelsTypeStr",label: "渠道身份",minWidth: "120","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "registerSourceStr",label: "注冊來源",minWidth: "120","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "registerDate",label: "注冊時間",minWidth: "180",align: "center","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "consultant",label: "置業顧問",minWidth: "120","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "createUserName",label: "創建人",minWidth: "120","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "createDate",label: "創建時間",align: "center",width: "180px","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "updateUserName",label: "更新人","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "updateDate",label: "更新時間",align: "center",width: "180px","show-overflow-tooltip": true,formatter: emptyTextFormatter,},{prop: "",label: "操作",columns: actionColumns,fixed: "right",align: "center",},
];export const formConfig = [{type: "input",prop: "name",label: "姓名",placeholder: "請輸入姓名",nimble: true,},{type: "input",prop: "consultant",label: "置業顧問",placeholder: "請輸入置業顧問",nimble: true,},{type: "input",prop: "phone",label: "聯系電話",placeholder: "請輸入聯系電話",nimble: true,},{type: "daterange",prop: "register",label: "注冊時間",format: "yyyy-MM-dd",pickerOptions: {},},{type: "select",prop: "marketActivityIds",label: "所屬項目",placeholder: "請選擇所屬項目",multiple: true,api: getConfigList,options: {label: "marketActivityName",value: "id",},},{type: "select",prop: "channelsTypes",label: "渠道身份",placeholder: "請選擇渠道身份",multiple: true,// api: getRoomStatus,// options: {//   label: "label",//   value: "id",// },optList: [{ value: "0", label: "自由經紀人" },{ value: "1", label: "渠道商" },{ value: "2", label: "內部員工" },{ value: "3", label: "招商人員" },{ value: "4", label: "運營人員" },],},{type: "select",prop: "registerSource",label: "注冊來源",placeholder: "請選擇注冊來源",// api: getUseType,// options: {//   label: "label",//   value: "id",// },optList: [{ value: "0", label: "小程序" },{ value: "1", label: "注冊后臺" },],},{type: "input",prop: "createUserName",label: "創建人",placeholder: "請輸入創建人",},{type: "daterange",prop: "create",label: "創建時間",format: "yyyy-MM-dd",pickerOptions: {},},{type: "input",prop: "updateUserName",label: "更新人",placeholder: "請輸入更新人",},{type: "daterange",prop: "update",label: "更新時間",format: "yyyy-MM-dd",pickerOptions: {},},
];export default {columns: tableColumns,
};

有需要的請私信博主，還請麻煩給個關注，博主不定期更新組件封裝，或許能夠有所幫助！！請關注公眾號