From ab87052f4a82332b9b4a471941a7bf48994b4390 Mon Sep 17 00:00:00 2001 From: spring <2396852758@qq.com> Date: 星期一, 17 二月 2025 13:21:56 +0800 Subject: [PATCH] 分页+分页序号连续 --- src/components/Table/lims-table.vue | 618 +++++++++++++++++++++++++++++++------------------------ 1 files changed, 345 insertions(+), 273 deletions(-) diff --git a/src/components/Table/lims-table.vue b/src/components/Table/lims-table.vue index bc456e0..84e3c1b 100644 --- a/src/components/Table/lims-table.vue +++ b/src/components/Table/lims-table.vue @@ -1,260 +1,327 @@ - <template> - <div> - <!-- 琛ㄦ牸 --> - <el-table - ref="multipleTable" - v-loading="tableLoading" - :border="border" - :data="tableData" - :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" - :height="height" - :highlight-current-row="highlightCurrentRow" - :row-class-name="rowClassName" - :row-style="rowStyle" - :row-key="rowKey" - stripe - style="width: 100%; " - tooltip-effect="dark" - @row-click="rowClick" - @current-change="currentChange" - @selection-change="handleSelectionChange" +<template> + <div> + <!-- 琛ㄦ牸 --> + <el-table + ref="multipleTable" + v-loading="tableLoading" + :border="border" + :data="tableData" + :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" + :height="height" + :highlight-current-row="highlightCurrentRow" + :row-class-name="rowClassName" + :row-style="rowStyle" + :row-key="rowKey" + stripe + style="width: 100%" + tooltip-effect="dark" + @row-click="rowClick" + @current-change="currentChange" + @selection-change="handleSelectionChange" + > + <template v-if="isSelection"> + <el-table-column type="selection" width="55" /> + </template> + <template> + <el-table-column + align="center" + label="搴忓彿" + type="index" + width="60" + :index="indexMethod" + /> + </template> + + <template v-for="(item, index) in column"> + <el-table-column + :column-key="item.columnKey" + :filter-method="item.filterHandler" + :filter-multiple="item.filterMultiple" + :filtered-value="item.filteredValue" + :filters="item.filters" + :fixed="item.fixed" + :label="item.label" + :min-width="item.minWidth" + :prop="item.prop" + show-overflow-tooltip + :sortable="item.sortable ? true : false" + :type="item.type" + :width="item.width" + align="center" > - <template v-if="isSelection"> - <el-table-column type="selection" width="55" /> - </template> - <template> - <el-table-column align="center" label="搴忓彿" type="index" width="60" /> - </template> + <!-- <div class="123" v-if="item.type == ''"> --> + <template + v-if="item.hasOwnProperty('colunmTemplate')" + :slot="item.colunmTemplate" + slot-scope="scope" + > + <slot + v-if="item.theadSlot" + :index="index" + :name="item.theadSlot" + :row="scope.row" + /> + </template> - <template v-for="(item, index) in column"> - <el-table-column :column-key="item.columnKey" :filter-method="item.filterHandler" - :filter-multiple="item.filterMultiple" :filtered-value="item.filteredValue" - :filters="item.filters" :fixed="item.fixed" :label="item.label" - :min-width="item.minWidth" :prop="item.prop" - show-overflow-tooltip - :sortable="item.sortable ? true : false" :type="item.type" :width="item.width" - align="center"> - <!-- <div class="123" v-if="item.type == ''"> --> - <template v-if="item.hasOwnProperty('colunmTemplate')" :slot="item.colunmTemplate" - slot-scope="scope"> - <slot v-if="item.theadSlot" :index="index" :name="item.theadSlot" :row="scope.row" /> - </template> + <template slot-scope="scope"> + <!-- 鎻掓Ы --> + <div v-if="item.dataType == 'slot'"> + <slot + v-if="item.slot" + :index="scope.$index" + :name="item.slot" + :row="scope.row" + /> + </div> + <!-- 杩涘害鏉� --> + <div v-else-if="item.dataType == 'progress'"> + <el-progress :percentage="Number(scope.row[item.prop])" /> + </div> - <template slot-scope="scope"> - <!-- 鎻掓Ы --> - <div v-if="item.dataType == 'slot'"> - <slot v-if="item.slot" :index="scope.$index" :name="item.slot" :row="scope.row" /> - </div> - <!-- 杩涘害鏉� --> - <div v-else-if="item.dataType == 'progress'"> - <el-progress :percentage="Number(scope.row[item.prop])" /> - </div> + <!-- tag --> + <div v-else-if="item.dataType == 'tag'"> + <el-tag + v-if=" + typeof dataTypeFn(scope.row[item.prop], item.formatData) == + 'string' + " + :title="scope.row[item.prop] | formatters(item.formatData)" + :type="formatType(scope.row[item.prop], item.formatType)" + >{{ + scope.row[item.prop] | formatters(item.formatData) + }}</el-tag + > + <el-tag + v-for="(tag, index) in dataTypeFn( + scope.row[item.prop], + item.formatData + )" + v-else-if=" + typeof dataTypeFn(scope.row[item.prop], item.formatData) == + 'object' + " + :key="index" + :title="scope.row[item.prop] | formatters(item.formatData)" + :type="formatType(tag, item.formatType)" + >{{ + item.tagGroup + ? tag[item.tagGroup.label] + ? tag[item.tagGroup.label] + : tag + : tag + }}</el-tag + > + <el-tag + v-else + :title="scope.row[item.prop] | formatters(item.formatData)" + :type="formatType(scope.row[item.prop], item.formatType)" + >{{ + scope.row[item.prop] | formatters(item.formatData) + }}</el-tag + > + </div> - <!-- tag --> - <div v-else-if="item.dataType == 'tag'"> - <el-tag v-if="typeof dataTypeFn(scope.row[item.prop], item.formatData) == 'string'" - :title="scope.row[item.prop] | formatters(item.formatData)" - :type="formatType(scope.row[item.prop], item.formatType)">{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag> - <el-tag v-for="(tag, index) in dataTypeFn(scope.row[item.prop], item.formatData)" - v-else-if="typeof dataTypeFn(scope.row[item.prop], item.formatData) == 'object'" - :key="index" :title="scope.row[item.prop] | formatters(item.formatData)" - :type="formatType(tag, item.formatType)">{{ item.tagGroup ? tag[item.tagGroup.label] ? tag[item.tagGroup.label] : tag : tag }}</el-tag> - <el-tag v-else :title="scope.row[item.prop] | formatters(item.formatData)" - :type="formatType(scope.row[item.prop], item.formatType)">{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag> - </div> - - <!-- 鎸夐挳 --> - <div v-else-if="item.dataType == 'action'"> - <template v-for="(o, key) in item.operation"> + <!-- 鎸夐挳 --> + <div v-else-if="item.dataType == 'action'"> + <template v-for="(o, key) in item.operation"> + <el-button + v-if="o.type != 'upload'" + size="mini" + v-show="o.showHide ? o.showHide(scope.row) : true" + :disabled="o.disabled ? o.disabled(scope.row) : false" + :icon="iconFn(o)" + :plain="o.plain" + :style="{ color: o.name === '鍒犻櫎' ? '#f56c6c' : o.color }" + :type="o.type | typeFn(scope.row)" + @click="o.clickFun(scope.row)" + > + {{ o.name }} + </el-button> + <el-upload + action="#" + size="mini" + :on-change=" + (file, fileList) => o.clickFun(scope.row, file, fileList) + " + :multiple="o.multiple ? o.multiple : false" + :limit="o.limit ? o.limit : 1" + :disabled="o.disabled ? o.disabled(scope.row) : false" + :accept=" + o.accept + ? o.accept + : '.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' + " + v-if="o.type == 'upload'" + style="display: inline-block; width: 50px" + v-show="o.showHide ? o.showHide(scope.row) : true" + :auto-upload="false" + :on-exceed="onExceed" + :show-file-list="false" + > <el-button - v-if="o.type!='upload'" - size="mini" - v-show="o.showHide ? o.showHide(scope.row) : true" - :disabled="o.disabled ? o.disabled(scope.row) : false" - :icon="iconFn(o)" - :plain="o.plain" - :style="{ 'color': o.name === '鍒犻櫎' ? '#f56c6c' : o.color }" - :type="o.type | typeFn(scope.row)" - @click="o.clickFun(scope.row)"> - {{ o.name }} - </el-button> - <el-upload - action="#" - size="mini" - :on-change="(file, fileList)=>o.clickFun(scope.row,file, fileList)" - :multiple="o.multiple?o.multiple:false" - :limit="o.limit?o.limit:1" + :size="o.size ? o.size : 'small'" + type="text" :disabled="o.disabled ? o.disabled(scope.row) : false" - :accept="o.accept?o.accept:'.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'" - v-if="o.type=='upload'" style="display: inline-block;width: 50px;" - v-show="o.showHide ? o.showHide(scope.row) : true" - :auto-upload="false" - :on-exceed="onExceed" - :show-file-list="false"> - <el-button :size="o.size?o.size:'small'" type="text" :disabled="o.disabled ? o.disabled(scope.row) : false">{{o.name}}</el-button> - </el-upload> - </template> - </div> - <!-- 榛樿绾睍绀烘暟鎹� --> - <div v-else> - <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span> - <span v-else>{{ scope.row[item.prop] | formatters(item.formatData) }}</span> - </div> - </template> - </el-table-column> - </template> - </el-table> - <pagination - v-show="page.total>0" + >{{ o.name }}</el-button + > + </el-upload> + </template> + </div> + <!-- 榛樿绾睍绀烘暟鎹� --> + <div v-else> + <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span> + <span v-else>{{ + scope.row[item.prop] | formatters(item.formatData) + }}</span> + </div> + </template> + </el-table-column> + </template> + </el-table> + <pagination + v-show="page.total > 0" :total="page.total" :layout="page.layout" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" /> - </div> - </template> + </div> +</template> - <script> - // 娉細浠ヤ笅鏄墍鏈夐厤缃」锛屽叾涓渶甯镐娇鐢ㄧ殑灏辨槸label銆亀idth銆乸rop銆乨ataType銆乻lot - // label 锛氬垪鍚嶏紝灏辨槸琛ㄥご涓婄殑鏍囩鍙粈涔堜簺浠�涔堬紝绫诲瀷 string - // width锛氳鍒楀搴︼紝 string - // prop锛� table缁戝畾鏁版嵁瀛楁 string,杩欎竴鍒楄灞曠ず鍝釜tableData閲岄潰鐨勫瓧娈靛氨鍐欏摢涓瓧娈� - // dataType锛� 鍐呯疆澶氫釜鍩烘湰鐨別lement缁勪欢鍙緵鐩存帴浣跨敤 string - // slot 褰揱dataType`涓篳slot`鏃跺繀甯﹀弬鏁帮紝鍙傛暟鍊间负鎻掓Ы鐨� `slot` 鍊� string锛屽叿浣撲娇鐢ㄦ柟娉曡鐪嬩笅闈㈢殑绗�4鐐箂lot鎻掓Ы鐨勪娇鐢� - // fixed锛氬垪鏄惁鍥哄畾鍦ㄥ乏渚ф垨鑰呭彸渚э紝true 琛ㄧず鍥哄畾鍦ㄥ乏渚� string, boolean - // sortable 瀵瑰簲鍒楁槸鍚﹀彲浠ユ帓搴� boolean, string - // filters 鏁版嵁杩囨护鐨勯�夐」锛屾暟缁勬牸寮忥紝鏁扮粍涓殑鍏冪礌闇�瑕佹湁 text 鍜� value 灞炴�с�侫rray - // columnKey 锛歝olumn 鐨� key锛屽鏋滈渶瑕佷娇鐢� filter-change 浜嬩欢锛屽垯闇�瑕佹灞炴�ф爣璇嗘槸鍝釜 column 鐨勭瓫閫夋潯浠� - // filteredValue 閫変腑鐨勬暟鎹繃婊ら」锛屽鏋滈渶瑕佽嚜瀹氫箟琛ㄥご杩囨护鐨勬覆鏌撴柟寮忥紝鍙兘浼氶渶瑕佹灞炴�с�� - // filterMultiple 鏁版嵁杩囨护鐨勯�夐」鏄惁澶氶�� - // minWidth 瀵瑰簲鍒楃殑鏈�灏忓搴︼紝涓� width 鐨勫尯鍒槸 width 鏄浐瀹氱殑锛宮in-width 浼氭妸鍓╀綑瀹藉害鎸夋瘮渚嬪垎閰嶇粰璁剧疆浜� min-width 鐨勫垪 string - // formatData 瀵规暟鎹繘琛屾暟鎹鐞嗭紝鎺ュ彈涓�涓洖璋冨嚱鏁� (params?: {prop}) => {} - // formatType 褰� `dataType`涓� `tag`鏃讹紝瀵规爣绛鹃鑹茶缃� (params?: {prop}) => { return 'danger'| 'success'... }` - // operation 褰� `dataType` 涓� `option`鏃讹紝瀵规寜閽殑 閰嶇疆锛屽叿浣撻厤缃」浠ヤ笅鍥句负鍑唎bject - // tagGroup 褰� `dataType`涓� `tag`鏃讹紝缁戝畾鏁版嵁闆嗗瓧娈垫樉绀哄悕绉� object - /** - * 鎻掓Ы鐨勪娇鐢ㄦ柟娉�: - */ - /* <div +<script> +// 娉細浠ヤ笅鏄墍鏈夐厤缃」锛屽叾涓渶甯镐娇鐢ㄧ殑灏辨槸label銆亀idth銆乸rop銆乨ataType銆乻lot +// label 锛氬垪鍚嶏紝灏辨槸琛ㄥご涓婄殑鏍囩鍙粈涔堜簺浠�涔堬紝绫诲瀷 string +// width锛氳鍒楀搴︼紝 string +// prop锛� table缁戝畾鏁版嵁瀛楁 string,杩欎竴鍒楄灞曠ず鍝釜tableData閲岄潰鐨勫瓧娈靛氨鍐欏摢涓瓧娈� +// dataType锛� 鍐呯疆澶氫釜鍩烘湰鐨別lement缁勪欢鍙緵鐩存帴浣跨敤 string +// slot 褰揱dataType`涓篳slot`鏃跺繀甯﹀弬鏁帮紝鍙傛暟鍊间负鎻掓Ы鐨� `slot` 鍊� string锛屽叿浣撲娇鐢ㄦ柟娉曡鐪嬩笅闈㈢殑绗�4鐐箂lot鎻掓Ы鐨勪娇鐢� +// fixed锛氬垪鏄惁鍥哄畾鍦ㄥ乏渚ф垨鑰呭彸渚э紝true 琛ㄧず鍥哄畾鍦ㄥ乏渚� string, boolean +// sortable 瀵瑰簲鍒楁槸鍚﹀彲浠ユ帓搴� boolean, string +// filters 鏁版嵁杩囨护鐨勯�夐」锛屾暟缁勬牸寮忥紝鏁扮粍涓殑鍏冪礌闇�瑕佹湁 text 鍜� value 灞炴�с�侫rray +// columnKey 锛歝olumn 鐨� key锛屽鏋滈渶瑕佷娇鐢� filter-change 浜嬩欢锛屽垯闇�瑕佹灞炴�ф爣璇嗘槸鍝釜 column 鐨勭瓫閫夋潯浠� +// filteredValue 閫変腑鐨勬暟鎹繃婊ら」锛屽鏋滈渶瑕佽嚜瀹氫箟琛ㄥご杩囨护鐨勬覆鏌撴柟寮忥紝鍙兘浼氶渶瑕佹灞炴�с�� +// filterMultiple 鏁版嵁杩囨护鐨勯�夐」鏄惁澶氶�� +// minWidth 瀵瑰簲鍒楃殑鏈�灏忓搴︼紝涓� width 鐨勫尯鍒槸 width 鏄浐瀹氱殑锛宮in-width 浼氭妸鍓╀綑瀹藉害鎸夋瘮渚嬪垎閰嶇粰璁剧疆浜� min-width 鐨勫垪 string +// formatData 瀵规暟鎹繘琛屾暟鎹鐞嗭紝鎺ュ彈涓�涓洖璋冨嚱鏁� (params?: {prop}) => {} +// formatType 褰� `dataType`涓� `tag`鏃讹紝瀵规爣绛鹃鑹茶缃� (params?: {prop}) => { return 'danger'| 'success'... }` +// operation 褰� `dataType` 涓� `option`鏃讹紝瀵规寜閽殑 閰嶇疆锛屽叿浣撻厤缃」浠ヤ笅鍥句负鍑唎bject +// tagGroup 褰� `dataType`涓� `tag`鏃讹紝缁戝畾鏁版嵁闆嗗瓧娈垫樉绀哄悕绉� object +/** + * 鎻掓Ы鐨勪娇鐢ㄦ柟娉�: + */ +/* <div slot="protocolSlot" slot-scope="scope" > <span>{{ scope.row.protocol }}</span> </div> */ - /** - * 浣跨敤formatData杩涜鏁版嵁澶勭悊 - */ - // { - // type: '', - // label: '鍚敤鐘舵��', - // prop: 'is_active', - // formatData: (item) => { - // const str = item == true ? '宸插惎鐢�' : '鏈惎鐢�' - // return str - // } - // }, - /** - * operation閰嶇疆 - */ - // operation閰嶇疆涓昏鏄潵鐢ㄤ簬琛ㄦ牸閲岄潰鐨勬搷浣滈偅涓�鍒楋紝閫氬父灏变細鏈夊緢澶氭寜閽紝鏈変互涓嬪弬鏁帮細 - // name锛氭寜閽悕绉帮紝string - // type锛氭寜閽被鍨嬶紝`string` | `danger | success`锛屼互elementUi 鍙傛暟涓哄噯 - // size锛氭寜閽ぇ灏忥紝浠lementUi 鍙傛暟涓哄噯 - // icon锛氭寜閽笂鐨刬con锛屼互elementUi 鍙傛暟涓哄噯 - // plain锛氭寜elementUi 鏂囨。涓哄噯 - // clickFun锛氭寜閽殑鍥炶皟鍑芥暟 - export default { - name: 'ZTTable', - filters: { - typeFn(val, row) { - // console.log(val, row, '11111111'); - if (typeof (val) === 'function') { - return val(row); - } else return val; - }, - describeConts(val, describeCont) { - if (typeof (describeCont) === 'function') { - return describeCont(val); - } else return val; - }, - formatters(val, format) { - if (typeof (format) === 'function') { - return format(val); - } else return val; - } +/** + * 浣跨敤formatData杩涜鏁版嵁澶勭悊 + */ +// { +// type: '', +// label: '鍚敤鐘舵��', +// prop: 'is_active', +// formatData: (item) => { +// const str = item == true ? '宸插惎鐢�' : '鏈惎鐢�' +// return str +// } +// }, +/** + * operation閰嶇疆 + */ +// operation閰嶇疆涓昏鏄潵鐢ㄤ簬琛ㄦ牸閲岄潰鐨勬搷浣滈偅涓�鍒楋紝閫氬父灏变細鏈夊緢澶氭寜閽紝鏈変互涓嬪弬鏁帮細 +// name锛氭寜閽悕绉帮紝string +// type锛氭寜閽被鍨嬶紝`string` | `danger | success`锛屼互elementUi 鍙傛暟涓哄噯 +// size锛氭寜閽ぇ灏忥紝浠lementUi 鍙傛暟涓哄噯 +// icon锛氭寜閽笂鐨刬con锛屼互elementUi 鍙傛暟涓哄噯 +// plain锛氭寜elementUi 鏂囨。涓哄噯 +// clickFun锛氭寜閽殑鍥炶皟鍑芥暟 +export default { + name: "ZTTable", + filters: { + typeFn(val, row) { + // console.log(val, row, '11111111'); + if (typeof val === "function") { + return val(row); + } else return val; }, - props: { - isSelection: { - type: Boolean, - default: false + describeConts(val, describeCont) { + if (typeof describeCont === "function") { + return describeCont(val); + } else return val; + }, + formatters(val, format) { + if (typeof format === "function") { + return format(val); + } else return val; + }, + }, + props: { + isSelection: { + type: Boolean, + default: false, + }, + height: { + type: String, + default: null, + }, + tableLoading: { + type: Boolean, + default: false, + }, + handleSelectionChange: { + type: Function, + default: () => { + return () => {}; }, - height: { - type: String, - default: null + }, + rowClick: { + type: Function, + default: () => { + return () => {}; }, - tableLoading: { - type: Boolean, - default: false + }, + currentChange: { + type: Function, + default: () => { + return () => {}; }, - handleSelectionChange: { - type: Function, - default: () => { - return () => { - }; - } + }, + border: { + type: Boolean, + default: false, + }, + highlightCurrentRow: { + type: Boolean, + default: false, + }, + headerCellStyle: { + type: Object, + default: () => { + return {}; }, - rowClick: { - type: Function, - default: () => { - return () => { - }; - } + }, + column: { + type: Array, + default() { + return []; }, - currentChange: { - type: Function, - default: () => { - return () => { - }; - } - }, - border: { - type: Boolean, - default: false - }, - highlightCurrentRow: { - type: Boolean, - default: false - }, - headerCellStyle: { - type: Object, - default: () => { - return {}; - } - }, - column: { - type: Array, - default() { - return []; - } - }, - rowClassName: { - type: Function, - default: () => { - - } - }, - rowStyle: { - type: Object || Function, - default: () => { - } - }, - tableData: { - type: Array, - default() { - return []; - } + }, + rowClassName: { + type: Function, + default: () => {}, + }, + rowStyle: { + type: Object || Function, + default: () => {}, + }, + tableData: { + type: Array, + default() { + return []; }, rowKey: { type: String, @@ -272,47 +339,52 @@ } } }, + }, - methods: { - iconFn(row) { - if (row.name === '缂栬緫') { - return 'el-icon-edit' - } else if (row.name === '鍒犻櫎') { - return 'el-icon-delete' - } else if (row.name === '鏌ョ湅') { - return 'el-icon-view' - } else { - return row.icon - } - // if (typeof (val) === 'function') { - // return val(row); - // } else return val; - }, - formatType(val, format) { - if (typeof (format) === 'function') { - return format(val); - } else return ''; - }, - dataTypeFn(val, format) { - if (typeof (format) === 'function') { - return format(val); - } else return val; - }, - setCurrent(row) { - this.$refs.multipleTable.setCurrentRow(); - }, - onExceed(){ - this.$message.warning('瓒呭嚭鏂囦欢涓暟'); - }, - pagination(page,limit){ - this.$emit('pagination',{pageNum: page, pageSize: limit}); + methods: { + iconFn(row) { + if (row.name === "缂栬緫" || row.name === "淇敼") { + return "el-icon-edit"; + } else if (row.name === "鍒犻櫎") { + return "el-icon-delete"; + } else if (row.name === "鏌ョ湅") { + return "el-icon-view"; + } else { + return row.icon; } - } - }; - </script> + // if (typeof (val) === 'function') { + // return val(row); + // } else return val; + }, + formatType(val, format) { + if (typeof format === "function") { + return format(val); + } else return ""; + }, + dataTypeFn(val, format) { + if (typeof format === "function") { + return format(val); + } else return val; + }, + setCurrent(row) { + this.$refs.multipleTable.setCurrentRow(); + }, + onExceed() { + this.$message.warning("瓒呭嚭鏂囦欢涓暟"); + }, + pagination({ page, limit }) { + this.$emit("pagination", { page: page, limit: limit }); + }, + indexMethod(index) { + // return index * 2; + return (this.page.current - 1) * this.page.size + index + 1; + }, + }, +}; +</script> - <style scoped> - .el-table >>> .el-table__empty-text { - text-align: center - } - </style> +<style scoped> +.el-table >>> .el-table__empty-text { + text-align: center; +} +</style> -- Gitblit v1.9.3