vue後臺管理系統經常使用的頁面組件封裝

table 表格組件封裝

e-table-list

<template>
  <el-table ref="table" v-loading="loading" element-loading-text="Loading" :data="tableData" :row-key="rowKey" border fit highlight-current-row tooltip-effect="dark" style="width: 100%" @sort-change="handleSortChange" @selection-change="handleSelectionChange" > <!--多選列--> <el-table-column v-if="indexShow" type="index" align="center" width="50"> </el-table-column> <el-table-column v-if="selectionShow" type="selection" width="50" align="center" highlight-current-row fixed :reserve-selection="true" ></el-table-column> <el-table-column v-for="(item, index) in tableLabel" :width="item.width ? item.width : ''" :fixed="item.fixed ? item.fixed : false" :type="item.type ? item.type : ''" :key="index" :align="item.align" :label="item.label" :prop="item.param" :sortable="item.sortable ? 'custom' : false" v-show="index==1" > <template slot-scope="scope"> <slot v-if="item.slot" v-bind:scope="scope" :name="item.slot"></slot> <div v-html="item.render(scope.row)" v-else-if="item.render"> </div> <span v-else>{{ scope.row[item.param] }} {{ item.type }}</span> </template> </el-table-column> <el-table-column v-if="tableOption.label" :width="tableOption.width" :label="tableOption.label" align="center" class-name="small-padding fixed-width" :fixed="tableOption.fixed ? tableOption.fixed : false" > <template slot-scope="scope"> <el-button v-for="(item, index) in tableOption.options" :key="index" :type="item.type" :icon="item.icon" @click="handleButton(item.methods, scope.row, scope.row)" size="mini" > {{ item.label }} </el-button> </template> </el-table-column> </el-table>
</template>

<script> export default { props: { loading: { type: Boolean, default: false, }, tableData: { type: Array, default: () => { return []; }, }, tableLabel: { type: Array, default: () => { return []; }, }, tableOption: { type: Object, default: () => { return {}; }, }, indexShow:{ type: Boolean, default: false, }, selectionShow:{ type: Boolean, default: false, }, radioShow:{ type:Boolean, default: false }, rowKey:{ type:String, default:'' } }, components: {}, methods: { handleButton(methods, row, index) { // 按鈕事件 this.$emit("handleButton", { methods: methods, row: row, index: index }); }, handleSortChange(val) { // 排序 this.$emit("handleSortChange", val); }, handleSelectionChange(val) { this.$emit("handleSelectionChange", val); } }, }; </script>

<style> </style>
複製代碼

使用

search 表格組件分裝

e-search

<!-- 搜索組件 -->
<template> <div class="content"> <template v-for="(item, index) in fieldList"> <div v-show="icon === 'close' ? index < count : true" :key="index" > <div class="item-style"> <span class="label-style" :style="{width: width.labelWidth + 'px'}">{{ item.label }}</span> <!-- 普通輸入框 --> <el-input v-if="item.type === 'input'" v-model.trim="defaultData[item.value]" :size="size" :style="{width: width.itemWidth + 'px'}" :type="item.type" :disabled="item.disabled" :placeholder="getPlaceholder(item)" @keyup.enter.native="handleFilter" @blur="handleEvent($event, item.value)" /> <!-- 日期/時間 --> <el-date-picker v-if="item.type === 'date'" v-model="defaultData[item.value]" :size="size" :style="{width: width.itemWidth + 'px'}" :type="item.dateType" :picker-options="item.TimePickerOptions" :clearable="item.clearable" :disabled="item.disabled" start-placeholder="開始時間" end-placeholder="結束時間" value-format="yyyy-MM-dd HH:MM:SS" :placeholder="getPlaceholder(item)" @change="handleEvent($event, item.value, 'change')" /> <!-- 選擇框 --> <el-select v-if="item.type === 'select'" v-model="defaultData[item.value]" :size="size" :style="{width: width.itemWidth + 'px'}" :disabled="item.disabled" :clearable="item.clearable" :filterable="item.filterable" :multiple="item.multiple" :placeholder="getPlaceholder(item)" @change="handleEvent($event, item.value, 'change')" > <el-option v-for="childItem in listTypeInfo[item.list]" :key="childItem.id" :label="childItem.name" :value="childItem.id" :disabled="childItem.disabled" /> </el-select> <!-- 計數器 --> <el-input-number v-if="item.type === 'inputNumber'" v-model="defaultData[item.value]" :size="size" :style="{width: width.itemWidth + 'px'}" :min="item.min" :max="item.max" @change="handleEvent($event, item.value, 'change')" /> </div> </div> </template> <div v-if="!btnHidden && fieldList.length !== 0" class="btn-style" > <el-button :type="btnStyle[0].type" :size="size" :plain="btnStyle[0].plain" :round="btnStyle[0].round" :icon="btnStyle[0].icon" :disabled="btnStyle[0].disabled" @click="handleFilter" > {{ btnStyle[0].text }} </el-button> <el-button :type="btnStyle[1].type" :size="size" :plain="btnStyle[1].plain" :round="btnStyle[1].round" :disabled="btnStyle[1].disabled" :icon="btnStyle[1].icon" @click="handleReset" > {{ btnStyle[1].text }} </el-button> </div> <el-button v-if="!btnHidden && fieldList.length > count" type="text" @click="icon === 'open' ? icon = 'close' : icon = 'open'" style="margin-left: 6px;" >{{ icon === 'open' ? '收起' : '展開' }} <i :class="icon === 'open' ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" /> </el-button> </div> </template>
<script> export default { name: 'ESearch', props: { /**字段默認數據 */ data: { type: Object, default: () => {}, required: true }, /**字段配置項 */ fieldList: { type: Array, default: () => [], required: true }, /**相關的列表 */ listTypeInfo: { type: Object, default: () => {} }, /**按鈕區域是否隱藏 */ btnHidden: { type: Boolean, default: false }, /**組件尺寸 */ size: { type: String, default: 'mini' }, /**默認搜索數 */ count: { type: Number, default: 4 }, /**組件及label寬度 */ width: { type: Object, default: () => ({ labelWidth: 110, itemWidth: 220 }) }, /**按鈕配置 */ btnStyle: { type: Array, default: () => [ { icon: null, text: '搜索', disabled: false, type: 'primary', plain: false, round: false }, { icon: null, text: '重置', disabled: false, type: null, plain: false, round: false } ] } }, data: () => ({ defaultData: {}, icon: 'close' }), mounted () { /** * 子組件沒法直接修改父組件傳遞過來的值 * 因而將父組件傳遞的值首先賦值給 defaultData * 在搜索條件中一樣使用 defaultData * 永遠保持 props 傳遞的 data 純潔度 */ this.defaultData = {...this.data} }, methods: { /** * @func 佔位符顯示 * @param {Object} row * @desc 📝 */ getPlaceholder (row) { let placeholder if (row.type === 'input') { placeholder = '請輸入' + row.label } else if (row.type === 'select' || row.type === 'time' || row.type === 'date') { placeholder = '請選擇' + row.label } else { placeholder = row.label } return placeholder }, /** * @func 事件處理 * @desc 📝 */ handleEvent (event, val, change) { let obj = { value: change === 'change' ? event : event.target.value, label: val } this.$emit('handleEvent', obj) }, /** * @func 搜索 * @desc 📝 */ handleFilter () { this.$emit('handleFilter', this.defaultData) }, /** * @func 重置 * @desc 📝 */ handleReset () { this.defaultData = {...this.data} this.$emit('handleReset', this.defaultData) } } } </script>
<style lang="scss" scoped> .content { display: flex; flex-wrap: wrap; position: relative; } .content .item-style { margin: 6px auto; line-height: 1; } .content .item-style .label-style { display: inline-block; justify-self: end; font-size: 13px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; text-align: right; margin-right: 12px; color: #222222; } .btn-style { margin: 6px 0 6px auto; } </style>
複製代碼

使用

dialog 彈框

<template>
  <div> <el-dialog class="comn_dialog" :title="dialogTitle" :visible.sync="visible" :width="popupWidth" :top="popupTop" @close="Cancel" > <slot> <p>彈窗內容自定義</p> </slot> <span slot="footer" class="dialog-footer"> <el-button @click="Cancel">取 消</el-button> <el-button type="primary" @click="Save">肯定</el-button> </span> </el-dialog> </div>
</template>
<script> export default { props: { dialogTitle: { type: String, default: "標題" }, centerDialogVisible: { type: Boolean, default() { return false; } }, popupWidth: { type: String, default() { return "430px"; } }, popupTop: { type: String, default() { return "23vh"; } } }, computed: { visible: { get() { return this.centerDialogVisible; }, set(val) { // 當visible改變的時候，觸發父組件的 updateVisible方法，在該方法中更改傳入子組件的 centerDialogVisible的值 this.$emit("updateVisible", val); } } }, methods: { Cancel() { this.$emit("resetPopupData"); }, Save() { this.$emit("submitPopupData"); } } }; </script>
<style lang="scss"> .comn_dialog { .el-dialog__header { padding: 8px 0px 3px 8px; border-bottom: 1px solid #e7e6e6; box-shadow: 0px 4px 4px -4px #d1d0d0; } .el-dialog__title { font-size: 16px; letter-spacing: 1px; color: #464646; font-weight: bolder; } .el-dialog__footer { padding: 0px 20px 20px 0px; } .el-dialog__headerbtn { position: static; // 兼容IE11 ,取消原有的position定位 } .el-dialog__close { // color: $header_bg; font-size: 20px; font-weight: bolder; position: absolute; top: 8px; right: 8px; &::after { content: ''; // border: 2px solid $header_bg; width: 20px; height: 20px; border-radius: 25px; position: absolute; right: -2px; top: -3px; } } .el-dialog__body { padding: 20px; } .dialog-footer{ display: flex; justify-content: center; align-items: center; } } </style>
複製代碼

使用