關於element中表格和表單的封裝方式
pc端基礎的表格組件的封裝
list.vue
<!--region 封裝的分頁 table--> <template> <div class="table"> <!-- <el-card shadow="always" class="card-table"> --> <el-table id="iTable" ref="mutipleTable" v-loading.iTable="options.loading" highlight-current-row :data="list" :stripe="options.stripe" :row-key="rowKey" :row-class-name="rowClassName" :header-cell-style="{ 'text-align': 'center', background: '#051b54', color: '#EBEBEB', 'font-weight': '400', }" @row-click="rowClick" @selection-change="handleSelectionChange" > > <!--region 選擇框--> <el-table-column v-if="options.mutiSelect" type="selection" :resizable="false" /> <!--endregion--> <!--region 數據列--> <template v-for="(column, index) in columns"> <el-table-column :key="column.label" :resizable="false" :prop="column.prop" :label="column.label" :align="column.align ? column.align : 'center'" :width="column.width" :show-overflow-tooltip="column.showOverflowTooltip" > <template slot-scope="scope"> <template v-if="!column.render"> {{ column.render }} <template v-if="column.formatter"> <span v-html="column.formatter(scope.row, column)" /> </template> <template v-else> <span v-if="scope.row[column.prop] && column.prop !== 'icon'">{{ scope.row[column.prop] }}</span> <span v-else-if="scope.row[column.prop] === 0">{{ scope.row[column.prop] }}</span> <svg-icon v-else-if="scope.row[column.prop] && column.prop === 'icon'" :icon-class="scope.row[column.prop]" class="header-svg" /> <span v-else>-</span> </template> </template> <template v-else> <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index" /> </template> </template> </el-table-column> </template> <!--endregion--> <!--region 按鈕操作組--> <el-table-column v-if="operates.list.length > 0" ref="fixedColumn" :resizable="false" label="操作" align="center" :width="operates.width" :fixed="operates.fixed" > <template slot-scope="scope"> <div class="operate-group"> <template v-for="btn in operates.list"> <div v-if="!btn.show || btn.show(scope.row)" :key="btn.label" class="item"> <!-- v-if="!btn.isAuth || btn.isAuth()" --> <el-button v-if="!btn.isAuth || btn.isAuth()" round :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled && btn.disabled(scope.row)" :plain="btn.plain" @click.native.prevent="btn.method(scope.row)" > {{ btn.label }} </el-button> </div> </template> </div> </template> </el-table-column> <!--endregion--> </el-table> <!-- </el-card> --> <!--region 分頁--> <el-pagination v-show="showPagination" v-if="pagination" :page-size="tableCurrentPagination.pageSize" :page-sizes="tableCurrentPagination.pageArray" :current-page="tableCurrentPagination.page" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleIndexChange" /> <!--endregion--> </div> </template> <!--endregion-->
<script> const _pageArray = [10, 20, 50] // 每頁展示條數的控制集合 export default { name: 'Table', components: { expandDom: { functional: true, props: { row: Object, render: Function, index: Number, column: { type: Object, default: null, }, }, render: (h, ctx) => { const params = { row: ctx.props.row, index: ctx.props.index, } if (ctx.props.column) params.column = ctx.props.column return ctx.props.render(h, params) }, }, }, props: { list: { type: Array, default: () => [], // prop:表頭綁定的地段,label:表頭名稱,align:每列數據展示形式(left, center, right),width:列寬 }, // 數據列表 columns: { type: Array, default: () => [], // 需要展示的列 === prop:列數據對應的屬性,label:列名,align:對齊方式,width:列寬 }, rowKey: { type: String, default: '', }, rowClassName: { type: Function, default: () => { return Function }, }, operates: { type: Object, default: () => {}, // width:按鈕列寬,fixed:是否固定(left,right),按鈕集合 === label: 文本,type :類型(primary / success / warning / danger / info / text),show:是否顯示,icon:按鈕圖標,plain:是否樸素按鈕,disabled:是否禁用,method:回調方法 }, options: { type: Object, // eslint-disable-next-line vue/require-valid-default-prop default: { stripe: true, // 是否為斑馬紋 table loading: true, // 是否添加表格loading加載動畫 highlightCurrentRow: true, // 是否支持當前行高亮顯示 mutiSelect: false, // 是否支持列表項選中功能 }, }, showPagination: { type: Boolean, default: true, }, // pagination: { // type: Object, // default: { // page: 1, // pageSize: 10 // } // }, total: { type: Number, default: 0, }, // 總數 otherHeight: { type: Number, default: 160, }, // 計算表格的高度 }, data() { return { tableCurrentPagination: {}, multipleSelection: [], // 多行選中 } }, mounted() { if (this.pagination && !this.pagination.pageSizes) { this.tableCurrentPagination.pageArray = _pageArray // 每頁展示條數控制 } this.tableCurrentPagination = this.pagination || { pageSize: this.total, page: 1, } // 判斷是否需要分頁 }, methods: { rowClick(row) { this.$emit('rowClick', row) }, // 切換每頁顯示的數量 handleSizeChange(size) { if (this.pagination) { this.tableCurrentPagination = { page: 1, pageSize: size, } this.$emit('handleSizeChange', this.tableCurrentPagination) // 跳轉頁面後回頁面頂部 this.$nextTick(() => { this.$refs.mutipleTable.bodyWrapper.scrollTop = 0 document.body.scrollTop = document.documentElement.scrollTop = 0 }) } }, // 切換頁碼 handleIndexChange(currnet) { if (this.pagination) { this.tableCurrentPagination.page = currnet this.$emit('handleIndexChange', this.tableCurrentPagination) // 跳轉頁面後回頁面頂部 this.$nextTick(() => { this.$refs.mutipleTable.bodyWrapper.scrollTop = 0 document.body.scrollTop = document.documentElement.scrollTop = 0 }) } }, // 多行選中 handleSelectionChange(val) { this.multipleSelection = val this.$emit('handleSelectionChange', val) }, // 顯示 篩選彈窗 showfilterDataDialog() { this.$emit('handleFilter') }, // 顯示 表格操作彈窗 showActionTableDialog() { this.$emit('handelAction') }, }, } </script>
<style lang="scss" scoped> .table { /deep/tr { background-color: transparent !important; border-bottom: none !important; } /deep/ td, th.is-leaf { border-bottom: none !important; } /deep/th, tr { background-color: transparent; border-bottom: none !important; } /deep/ .current-row td { background-color: #051b54 !important; } /deep/ .hover-row td { background-color: #051b54 !important; } /* 鼠標移入表格高亮yanse */ /deep/ tbody tr:hover > td { background-color: #051b54 !important; } /deep/ tbody tr:hover { background-color: #051b54 !important; } /deep/ .el-table__fixed-right::before, .el-table__fixed::before { background-color: transparent !important; } } .el-table--border::after, .el-table--group::after, .el-table::before { //去除表格底部白線 background-color: transparent !important; } .el-pagination { text-align: right; /deep/ .el-pagination__total, /deep/ .el-pagination__jump { color: #959abb !important; } /deep/ .el-input__inner { background-color: #0d102a !important; border-color: #2a3259; color: #959abb; } /deep/ .btn-prev, /deep/ .el-pager .number, /deep/ .btn-next { background-color: #0d102a !important; } /deep/ .el-pager .number { color: #959abb; } /deep/ .el-pager .number:hover { color: #fff; } /deep/.el-pager .active { color: #fff; } /deep/ .btn-next:hover, /deep/ .btn-prev:hover { color: #409eff; } /deep/ .btn-next, /deep/ .btn-prev { color: #fff; } /deep/ button:disabled { color: #959abb; } /deep/ .el-icon { background-color: transparent; color: #959abb; } /deep/ .el-icon-d-arrow-right { color: #fff; } /deep/ .el-icon:hover { color: #fff; } /deep/ .el-icon-arrow-up:hover { color: #fff; } } </style>
pc端基礎的表單組件的封裝
elForm.vue
<!-- * @Descriptin: 修改瞭一些內容 * @Version: 1.0 * @Autor: wxy * @Date: 2021-06-29 09:20:09 * @LastEditors: Please set LastEditors * @LastEditTime: 2021-11-02 15:05:15 --> <template> <el-form ref="form" :inline="inline" :label-width="labelWidth" class="datafill-elform" :model="baseData" :rules="rules" @keyup.enter.native="dataFormSubmit(baseData)" > <el-row> <el-col> <el-form-item v-for="item in baseForm" :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" > <!-- 輸入框 --> <el-input v-if="item.type === 'Input'" v-model="baseData[item.prop]" class="input" :readonly="item.readonly ? item.readonly : false" :type="item.inputType ? item.inputType : 'text'" :rows="6" :maxlength="item.maxlength ? item.maxlength : 256" :disabled="item.disabled" :clearable="item.clearable || true" :filterable="item.filterable || false" :placeholder="item.placeholder" /> <span v-if="item.type === 'Input'" class="itemunit">{{ item.unit }}</span> <!-- 輸入框 --> <el-input-number v-if="item.type === 'InputNumber'" v-model="baseData[item.prop]" controls-position="right" class="input" :readonly="item.readonly ? item.readonly : false" :type="item.inputType ? item.inputType : 'text'" :min="0" :precision="item.precision || 2" :disabled="item.disabled" :clearable="item.clearable || true" :placeholder="item.placeholder" /> <span v-if="item.type === 'InputNumber'" class="itemunit">{{ item.unit }}</span> <!-- 下拉框 --> <el-select v-if="item.type === 'Select'" v-model="baseData[item.prop]" :multiple="item.multiple ? item.multiple : false" :collapse-tags="item.collapseTags ? item.collapseTags : false" :placeholder="item.placeholder" :clearable="item.clearable || true" :disabled="item.disabled" :popper-append-to-body="false" popper-class="select-popper" :filterable="item.filterable || false" @change="item.change ? item.change(baseData[item.prop]) : changeHandle" > <el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value" :disabled="op.disabled" /> </el-select> <!-- 單選 --> <el-radio-group v-if="item.type === 'Radio'" v-model="baseData[item.prop]"> <el-radio v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio> </el-radio-group> <!-- 復選框 --> <el-checkbox-group v-if="item.type === 'Checkbox'" v-model="baseData[item.prop]"> <el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{ ch.label }}</el-checkbox> </el-checkbox-group> <!-- 日期 --> <el-date-picker v-if="item.type === 'Date'" v-model="baseData[item.prop]" :picker-options="item.pickerOptions" :clearable="item.clearable || true" :type="item.dateType ? item.dateType : 'date'" :placeholder="item.placeholder" range-separator="至" :start-placeholder="item.startPlaceholder ? item.startPlaceholder : '開始時間'" :end-placeholder="item.endPlaceholder ? item.endPlaceholder : '結束時間'" :format="item.format ? item.format : 'yyyy-MM-dd'" :value-format="item.format ? item.format : 'yyyy-MM-dd'" /> <!-- 月份 --> <el-date-picker v-if="item.type === 'Month'" v-model="baseData[item.prop]" type="month" :placeholder="item.placeholder" format="yyyy-MM" value-format="yyyy-MM" /> <!-- 年份 --> <el-date-picker v-if="item.type === 'Year'" v-model="baseData[item.prop]" type="year" :placeholder="item.placeholder" format="yyyy" value-format="yyyy" /> <!-- 文件上傳 --> <import-picture v-if="item.type === 'Import'" ref="importPic" :picture.sync="baseData[item.prop]" /> </el-form-item> <!-- 按鈕 --> <el-form-item v-for="item in searchHandle" :key="item.label"> <el-button v-if="!item.show ? item.show : true" :class="item.class" :round="item.round" :type="item.type" size="small" @click.native.prevent="item.handle()" > {{ item.label }} </el-button> </el-form-item> </el-col> </el-row> </el-form> </template>
<script> // import ImportPicture from '@/components/ImportPicture' export default { // components: { // ImportPicture // }, props: { inline: { type: Boolean, default: false, }, labelWidth: { type: String, default: '160px', }, baseForm: { type: Array, default: () => [], }, baseData: { type: Object, default: () => {}, }, searchHandle: { type: Array, default: () => [], }, rules: { type: Object, default: () => {}, }, // changeHandle: { // type: Function, // require: false, // default: this.change() // } }, mounted() { // console.log(this.baseData) }, methods: { changeHandle() { // console.log('1234567') }, dataFormSubmit(form) { this.$emit('dataFormSubmit', form) }, }, } </script>
<style lang="scss"> .el-form-item { margin-bottom: 0; } .el-input__inner { background-color: rgba(1, 15, 48, 0.3); border: 0.005051rem solid #093154; color: #959abb; } .searchButton { width: 60px; height: 32px; background: rgba(9, 12, 38, 0.3); border: 1px solid #25407c; border-radius: 17px; font-size: 14px; color: rgba(59, 210, 239, 1); } .el-button--primary { width: 72px; height: 32px; background: rgba(49, 99, 168, 0.3); border: 1px solid #25407c; border-radius: 2px; } </style>
表格的樣式
table.scss
// base-list表格通用樣式 .table { // height: 100%; background: transparent; .el-table__row { background-color: #0b2570 !important; color: #959abb; border: none; } /* 奇數行 */ .el-table__row:nth-of-type(odd) > td { background-color: #0b2570; } /* 偶數行 */ .el-table__row:nth-of-type(even) > td { background-color: #051b54 !important; } // 分頁 .el-pagination { float: right; margin: 10px; } // 操作列 .operate-group { display: flex; flex-wrap: wrap; .item { display: block; // flex: 0 0 50%; margin: 0 5px; } } .el-table__empty-block { background-color: #161a3d; color: #fff; } .el-loading-mask { background: transparent; } .el-table__expand-icon { color: #959abb !important; } }
表單的樣式
element.scss
// 修改分頁樣式 .paginationClass { position: absolute; bottom: 12px; right: 14px; .el-pagination__total, .el-pagination__jump { color: #959abb; } .el-select--mini { margin-top: -10px; } .el-input__inner { // background-color: #0d102a; background-color: rgba(1, 15, 48, 0.3); border-color: #2a3259; color: #959abb; } .btn-prev, .el-pager .number, .btn-next { background-color: #0d102a; } .el-pager .number { color: #959abb; } .el-pager .number:hover { color: #fff; } .el-pager .active { color: #fff; } .btn-next:hover, .btn-prev:hover { color: #409eff; } .btn-next, .btn-prev { color: #fff; } button:disabled { color: #959abb; background-color: transparent; } .el-icon { background-color: transparent; color: #959abb; } .el-icon-d-arrow-right { color: #fff; } .el-icon:hover { color: #fff; } .el-icon-arrow-up:hover { color: #fff; } } // el-menu 折疊框隱藏 .customer-left-menu { .el-submenu__title { display: none !important; } } // 修改消息通知頁面推送對象樣式 .disabledArea.el-textarea.is-disabled .el-textarea__inner { background-color: #252950 !important; } // 修改推送對象穿梭組件樣式 .transfer-left, .transfer-right { background-color: #0e1233 !important; border: none !important; .transfer-title { background-color: #0e1233 !important; color: #fff !important; border-bottom: 1px solid #092749 !important; } .el-tree { background-color: #0e1233 !important; color: #fff; .el-tree-node.is-current { .el-tree-node__content { background-color: #2f356a !important; } } .el-tree-node:focus > .el-tree-node__content { background-color: transparent; } .el-tree-node__content { background-color: transparent; } .el-tree-node__content:hover, .el-tree-node__content:active { background-color: #2f356a; } .el-tree-node__content:visited { background-color: #0e1233; } } }
混入的封裝
index.js
// 表格通用方法 const listMixin = { name: 'mixin', data() { return { // 分頁參數 pagination: { page: 1, pageSize: 10, }, } }, computed: { defaultOption() { return { // 分頁參數 pagination: { page: 1, pageSize: 10, }, step: 1, // 數值越大速度滾動越快 limitMoveNum: 1, // 開始無縫滾動的數據量 this.tableData.length hoverStop: false, // 是否開啟鼠標懸停stop direction: 1, // 0向下 1向上 2向左 3向右 openWatch: true, // 開啟數據實時監控刷新dom singleHeight: 60, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1 singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3 waitTime: 1000, // 單步運動停止的時間(默認值1000ms) } }, // 默認時間 timeDefault() { const date = new Date() let defalutStartTime = date.getTime() - 0 * 24 * 3600 * 1000 // 轉化為時間戳 let defalutEndTime = date.getTime() const startDateNs = new Date(defalutStartTime) const endDateNs = new Date(defalutEndTime) // 月,日 不夠10補0 defalutStartTime = startDateNs.getFullYear() + '-' + (startDateNs.getMonth() + 1 >= 10 ? startDateNs.getMonth() + 1 : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate()) defalutEndTime = endDateNs.getFullYear() + '-' + (endDateNs.getMonth() + 1 >= 10 ? endDateNs.getMonth() + 1 : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate()) return [defalutStartTime, defalutEndTime] }, }, methods: { // 返回首頁 goBack() { if (sessionStorage.getItem('selectMenuValue')) { // 省級消息通知頁和服務區投訴建議頁的緩存 sessionStorage.removeItem('selectMenuValue') } if (sessionStorage.getItem('searchData')) { sessionStorage.removeItem('searchData') } if (sessionStorage.getItem('searchPageIndex')) { sessionStorage.removeItem('searchPageIndex') } if (sessionStorage.getItem('searchPageSize')) { sessionStorage.removeItem('searchPageSize') } if (sessionStorage.getItem('reportMenu_scroll')) { sessionStorage.removeItem('reportMenu_scroll') } if (JSON.parse(localStorage.getItem('user')).restId) { this.$router.replace({ name: 'RestHome' }) } else { this.$router.replace({ name: 'Home' }) } // this.$router.push({ name: 'Home' }) }, // 查詢 search() { this.total = 0 this.pageIndex = 1 this.pagination.page = 1 this.getDataList() }, // 多選 selectionChangeHandle(val) { this.dataListSelections = val }, // 切換每頁顯示的數量 handleSizeChange(pagination) { this.pagination = pagination this.getDataList() }, // 切換頁碼 handleIndexChange(pagination) { this.pagination = pagination this.getDataList() }, // 返回列表頁並刷新 // refreshDataList(val) { // this.addOrUpdateVisible = false // if (val) this.getDataList() // } }, } export default listMixin
將以上三個文件掛在到main.js中
import listMixin from '@/util/mixin' // 查詢分頁 Vue.mixin(listMixin) // 混入 相當於選項合並
組件的使用
<template> <div> <div class="DR-right"> <div class="DR-right-head"> <base-elform label-width="0" :inline="true" :base-data="searchForm" :base-form="baseForm" :search-handle="searchHandle" /> </div> <div class="DR-right-body"> <base-list :list="list" :operates="operates" :total="total" :options="options" :pagination="pagination" :columns="columns" @handleSizeChange="handleSizeChange" @handleIndexChange="handleIndexChange" /> </div> </div> </div> </template>
<script> import api from '@/api/data' import baseList from './base-table/list' import BaseElform from './base-form/elForm' export default { components: { baseList, BaseElform, }, data() { // 表單參數 return { navLeft: { title: '卡口數據', icon: 'shujubaobiao', }, isRestAuth: true, // 查詢表單 searchForm: { restId: '', restDirection: '', carType: '', carNo: '', isOut: '', startTime: null, endTime: null, selectTime: [], }, exportOrTakeVisible: false, baseForm: [ { type: 'Select', placeholder: '篩選服務區方向', prop: 'restDirection', clearable: true, options: [ { value: '01', label: '方向1' }, { value: '02', label: '方向2' }, ], }, { type: 'Input', placeholder: '請輸入車牌號', clearable: true, prop: 'carNo', }, { type: 'Select', placeholder: '篩選車輛類型', prop: 'carType', clearable: true, options: [], }, { type: 'Select', placeholder: '是否駛離', clearable: true, prop: 'isOut', options: [ { value: false, label: '否' }, { value: true, label: '是' }, ], }, { type: 'Date', dateType: 'daterange', startPlaceholder: '選擇開始時間', endPlaceholder: '選擇結束時間', clearable: true, format: 'yyyy-MM-dd', prop: 'selectTime', }, ], searchHandle: [ { label: '搜索', round: 'round', show: true, class: 'searchButton', handle: () => { // 重置分頁組件 this.total = 0 this.pageIndex = 1 this.getDataList() }, }, { label: '導出', show: true, type: 'primary', handle: () => { this.excelOut() }, }, ], list: [], pageIndex: 1, pageSize: 10, total: 1, options: {}, columns: [ { prop: 'RestDirection', label: '服務區方向', }, { prop: 'CarNo', label: '車牌號', }, { prop: 'CarType', label: '車輛類型', }, { prop: 'CarNoColor', label: '車牌顏色', showOverflowTooltip: true, }, { prop: 'CarBrand', label: '車輛品牌', showOverflowTooltip: true, }, { prop: 'CarColor', label: '車身顏色', }, { prop: 'InTime', label: '入區時間', }, { prop: 'OutTime', label: '離區時間', }, { prop: 'stayTime', label: '在區時長(分)', }, ], //操作列 operates: { width: 160, fixed: 'right', list: [ { label: '編輯', type: 'text', show: () => { return true }, method: row => { this.addOrUpdateHandle(row.restId) }, }, { label: '刪除', type: 'text', show: () => { return true }, method: row => { this.deleteHandle(row.restId) }, }] }, } }, mounted() { this.searchForm.selectTime = this.timeDefault this.searchForm.restId = JSON.parse(sessionStorage.getItem('store')).areaId this.getCarList() this.getreastdire() this.getDataList() }, methods: { getCarList() { api.getCarTypeData(null).then(res => { if (res.code == '0' || res.code == 0) { this.baseForm[2].options = res.data } else { this.list = [] this.total = 0 } }) }, getreastdire() { let params = { restId: this.searchForm.restId, } api.getRestDirection(params).then(res => { if (res.code == '0' || res.code == 0) { this.baseForm[0].options = res.data } else { this.list = [] this.total = 0 } }) }, getDataList() { this.dataListLoading = true let params = { restId: this.searchForm.restId, restDirection: this.searchForm.restDirection, carNo: this.searchForm.carNo, carType: this.searchForm.carType, isOut: this.searchForm.isOut, page: this.pageIndex, pageSize: this.pageSize, startTime: this.searchForm.selectTime ? this.searchForm.selectTime[0] + ' 00:00:00' : null, endTime: this.searchForm.selectTime ? this.searchForm.selectTime[1] + ' 23:59:59' : null, } api.PostBayonetData(params).then(res => { if (res.code == '0' || res.code == 0) { this.list = res.data.list this.total = res.data.totalCount } else { this.list = [] this.total = 0 } this.dataListLoading = false }) }, handleSizeChange(pageObj) { this.pageIndex = pageObj.page this.pageSize = pageObj.pageSize this.getDataList() }, handleIndexChange(pageObj) { this.pageIndex = pageObj.page this.pageSize = pageObj.pageSize this.getDataList() }, // 導出 excelOut() { window.location.href = `${api.baseUrl}/v1/rest/car/record/excel?restId=${ this.searchForm.restId }&restDirection=${this.searchForm.restDirection}&carNo=${this.searchForm.carNo}&isOut=${ this.searchForm.isOut }&carType=${this.searchForm.carType}&startTime=${ this.searchForm.selectTime ? this.searchForm.selectTime[0] + ' 00:00:00' : '' }&endTime=${this.searchForm.selectTime ? this.searchForm.selectTime[1] + ' 23:59:59' : ''}` }, }, } </script>
1·基礎案例
<template> <div class="DR-right"> <div class="DR-right-head"> <div class="sys_title">角色管理</div> <base-elform label-width="0" :inline="true" :base-data="searchForm" :base-form="baseForm" :search-handle="searchHandle" /> </div> <div class="DR-right-body"> <base-list :list="list" :operates="operates" :total="total" :options="options" :columns="columns" :pagination="pagination" @handleSizeChange="handleSizeChange" @handleIndexChange="handleIndexChange" /> </div> <editDialog class="addUpdatedialog" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" ></editDialog> </div> </template>
<script> import api from '@/api/admin' import editDialog from './role_AddOrUpdated.vue' export default { components: { editDialog }, props: { title: { type: String, default: '', }, }, data() { // 表單參數 return { addOrUpdateVisible: false, // 查詢表單 searchForm: { roleName: '', }, baseForm: [ { type: 'Input', placeholder: '角色名稱', clearable: true, prop: 'roleName', }, ], searchHandle: [ { label: '搜索', round: 'round', show: true, class: 'searchButton', handle: () => { // 重置分頁組件 this.total = 0 // 點擊查詢回到第一頁 this.pagination.page = 1 this.getDataList() }, }, { label: '新增', show: true, type: 'primary', handle: () => { this.addOrUpdateHandle() }, }, ], list: [], total: 1, options: {}, columns: [ { prop: 'roleId', label: 'ID', }, { prop: 'roleName', label: '角色名稱', }, { prop: 'remark', label: '備註', }, { prop: 'createTime', label: '創建時間', }, ], operates: { width: 150, fixed: 'right', list: [ { label: '編輯', type: 'text', show: () => { return true }, method: row => { this.addOrUpdateHandle(row.roleId) }, }, { label: '刪除', type: 'text', show: () => { return true }, method: row => { this.deleteHandle(row.roleId, row.roleName) }, }, ], }, } }, mounted() { this.getDataList() }, methods: { getDataList() { this.dataListLoading = true let params = { roleName: this.searchForm.roleName, page: this.pagination.page, pageSize: this.pagination.pageSize, } api.getRoleDataList(params).then(res => { this.dataListLoading = false if (res.code == '0' || res.code == 0) { this.list = res.page.list this.total = res.page.totalCount } else { this.list = [] this.total = 0 } }) }, addOrUpdateHandle(val) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(val) }) }, deleteHandle(id, roleName) { this.$confirm(`確定對角色名稱為:[${roleName}]進行[刪除]操作?`, '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning', }) .then(() => { api.deleteRoleDataList(id).then(data => { if (data && data.code === 0) { this.$message({ message: '刪除成功', type: 'success', duration: 1500, onClose: () => { this.pagination.page = 1 this.getDataList() }, }) } }) }) .catch(() => {}) }, }, } </script>
2·特殊案例
要是有一條數據需要展示圖片:
使用基礎的list應該這樣配置
columns: [ { prop: 'name', label: '服務區名稱', }, ............ { prop: 'restPhoto', label: '服務區照片', render: (h, params) => { if (params.row.restPhoto && params.row.restPhoto !== '') { return h( 'el-button', { attrs: { type: 'text', size: 'small', }, on: { click: () => { this.magnify(params.row.restPhoto) }, }, }, '查看' ) } else { return h( 'el-link', { props: { type: 'info', underline: false, }, }, '-' ) } }, }, { prop: 'thirdUrlPath', label: '第三方服務區平臺鏈接', }, ], methods:{ // 點擊查看放大圖片 magnify(item) { // console.log(item) this.dialogMagnifyVisible = true this.magnifyPhoto = item }, }
3·特殊案例3
{ prop: 'status', label: '狀態', render: (h, params) => { return h('el-switch', { props: { value: params.row.status, activeValue: '1', inactiveValue: '0', }, on: { change: () => { this.changestatus(params.row) }, }, }) }, }, { prop: '', label: '重置密碼', render: (h, params) => { return h( 'el-button', { attrs: { type: 'text', size: 'small', }, on: { click: () => { this.restPassWords(params.row) }, }, }, '重置密碼' ) }, }, methods:{ changestatus(val) { let params = { userId: val.userId, status: val.status === '1' ? '0' : '1', } api.updateUserStatus(params).then(res => { if (res.code == 0) { this.getDataList() } }) }, }
4·特殊案例
一列中根據接口返回的不同狀態展示不同的顏色
組件:
<template> <div class="DR-right-body"> <base-elform style="margin-bottom:20px" label-width="0" :inline="true" :base-data="searchForm" :base-form="baseForm" :search-handle="searchHandle" /> <base-list headerHeight="63vh" :list="list" :operates="operates" :total="total" :options="options" :columns="columns" :cellStyle="cellStyle" :show-pagination="paginationShow" @handleSizeChange="handleSizeChange" @handleIndexChange="handleIndexChange" /> </div> </div> </template>
<script> methods: { //重點代碼 cellStyle({ row, columnIndex }) { if (row.congestionType === '1' && columnIndex === 9) { return 'color: #16a692 ' } else if (row.congestionType === '2' && columnIndex === 9) { return 'color: #c58d3b' } else if (row.congestionType === '3' && columnIndex === 9) { return 'color: #bd4337' } else { return } }, } </script>
<style lang="scss" scoped> .DR-right-head { display: flex; flex-wrap: wrap; height: 105px !important; box-sizing: border-box; .compaire { box-sizing: border-box; font-size: 20px; color: #33bee7; width: 100%; margin: 5px 0; } .left_container { width: 660px; height: 64px; background: #051134; .base-elform { margin-top: 10px; padding: 0 10px; } } } </style>
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Element使用el-table組件二次封裝
- vue中element-ui組件默認css樣式修改的四種方式
- Vue ELement Table技巧表格業務需求實戰示例
- 圖文詳解Element-UI中自定義修改el-table樣式
- 基於element-ui表格的二次封裝實現