關(guān)于element中表格和表單的封裝方式
更新時間：2022年07月29日 10:02:41 作者：仙女不講李
這篇文章主要介紹了關(guān)于element中表格和表單的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
pc端基礎(chǔ)的表格組件的封裝
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 數(shù)據(jù)列-->
<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] // 每頁展示條數(shù)的控制集合
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：每列數(shù)據(jù)展示形式（left, center, right），width:列寬
}, // 數(shù)據(jù)列表
columns: {
type: Array,
default: () => [], // 需要展示的列 === prop：列數(shù)據(jù)對應(yīng)的屬性，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：按鈕圖標(biāo)，plain：是否樸素按鈕，disabled：是否禁用，method：回調(diào)方法
},
options: {
type: Object,
// eslint-disable-next-line vue/require-valid-default-prop
default: {
stripe: true, // 是否為斑馬紋 table
loading: true, // 是否添加表格loading加載動畫
highlightCurrentRow: true, // 是否支持當(dāng)前行高亮顯示
mutiSelect: false, // 是否支持列表項選中功能
},
},
showPagination: {
type: Boolean,
default: true,
},
// pagination: {
// type: Object,
// default: {
// page: 1,
// pageSize: 10
// }
// },
total: {
type: Number,
default: 0,
},
// 總數(shù)
otherHeight: {
type: Number,
default: 160,
}, // 計算表格的高度
},
data() {
return {
tableCurrentPagination: {},
multipleSelection: [], // 多行選中
}
},
mounted() {
if (this.pagination && !this.pagination.pageSizes) {
this.tableCurrentPagination.pageArray = _pageArray // 每頁展示條數(shù)控制
}
this.tableCurrentPagination = this.pagination || {
pageSize: this.total,
page: 1,
} // 判斷是否需要分頁
},
methods: {
rowClick(row) {
this.$emit('rowClick', row)
},
// 切換每頁顯示的數(shù)量
handleSizeChange(size) {
if (this.pagination) {
this.tableCurrentPagination = {
page: 1,
pageSize: size,
}
this.$emit('handleSizeChange', this.tableCurrentPagination)
// 跳轉(zhuǎn)頁面后回頁面頂部
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)
// 跳轉(zhuǎn)頁面后回頁面頂部
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;
}
/* 鼠標(biāo)移入表格高亮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端基礎(chǔ)的表單組件的封裝
elForm.vue
<!--
* @Descriptin: 修改了一些內(nèi)容
* @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>
<!-- 復(fù)選框 -->
<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 : '結(jié)束時間'"
: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;
}
/* 奇數(shù)行 */
.el-table__row:nth-of-type(odd) > td {
background-color: #0b2570;
}
/* 偶數(shù)行 */
.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 {
// 分頁參數(shù)
pagination: {
page: 1,
pageSize: 10,
},
}
},
computed: {
defaultOption() {
return {
// 分頁參數(shù)
pagination: {
page: 1,
pageSize: 10,
},
step: 1, // 數(shù)值越大速度滾動越快
limitMoveNum: 1, // 開始無縫滾動的數(shù)據(jù)量 this.tableData.length
hoverStop: false, // 是否開啟鼠標(biāo)懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom
singleHeight: 60, // 單步運動停止的高度(默認(rèn)值0是無縫不停止的滾動) direction => 0/1
singleWidth: 0, // 單步運動停止的寬度(默認(rèn)值0是無縫不停止的滾動) direction => 2/3
waitTime: 1000, // 單步運動停止的時間(默認(rèn)值1000ms)
}
},
// 默認(rèn)時間
timeDefault() {
const date = new Date()
let defalutStartTime = date.getTime() - 0 * 24 * 3600 * 1000 // 轉(zhuǎn)化為時間戳
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')) {
// 省級消息通知頁和服務(wù)區(qū)投訴建議頁的緩存
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
},
// 切換每頁顯示的數(shù)量
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) // 混入 相當(dāng)于選項合并
組件的使用
<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() {
// 表單參數(shù)
return {
navLeft: {
title: '卡口數(shù)據(jù)',
icon: 'shujubaobiao',
},
isRestAuth: true,
// 查詢表單
searchForm: {
restId: '',
restDirection: '',
carType: '',
carNo: '',
isOut: '',
startTime: null,
endTime: null,
selectTime: [],
},
exportOrTakeVisible: false,
baseForm: [
{
type: 'Select',
placeholder: '篩選服務(wù)區(qū)方向',
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: '選擇結(jié)束時間',
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: '導(dǎo)出',
show: true,
type: 'primary',
handle: () => {
this.excelOut()
},
},
],
list: [],
pageIndex: 1,
pageSize: 10,
total: 1,
options: {},
columns: [
{
prop: 'RestDirection',
label: '服務(wù)區(qū)方向',
},
{
prop: 'CarNo',
label: '車牌號',
},
{
prop: 'CarType',
label: '車輛類型',
},
{
prop: 'CarNoColor',
label: '車牌顏色',
showOverflowTooltip: true,
},
{
prop: 'CarBrand',
label: '車輛品牌',
showOverflowTooltip: true,
},
{
prop: 'CarColor',
label: '車身顏色',
},
{
prop: 'InTime',
label: '入?yún)^(qū)時間',
},
{
prop: 'OutTime',
label: '離區(qū)時間',
},
{
prop: 'stayTime',
label: '在區(qū)時長（分）',
},
],
//操作列
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()
},
// 導(dǎo)出
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·基礎(chǔ)案例
<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() {
// 表單參數(shù)
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: '創(chuàng)建時間',
},
],
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·特殊案例
要是有一條數(shù)據(jù)需要展示圖片:
使用基礎(chǔ)的list應(yīng)該這樣配置
columns: [
{
prop: 'name',
label: '服務(wù)區(qū)名稱',
},
............
{
prop: 'restPhoto',
label: '服務(wù)區(qū)照片',
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: '第三方服務(wù)區(qū)平臺鏈接',
},
],
methods:{
// 點擊查看放大圖片
magnify(item) {
// console.log(item)
this.dialogMagnifyVisible = true
this.magnifyPhoto = item
},
}
3·特殊案例3
{
prop: 'status',
label: '狀態(tài)',
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·特殊案例
一列中根據(jù)接口返回的不同狀態(tài)展示不同的顏色
組件：
<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>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中封裝eCharts組件及優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue中的errorHandler異常捕獲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue、react等單頁面項目應(yīng)該這樣子部署到服務(wù)器
這篇文章主要介紹了vue、react等單頁面項目應(yīng)該這樣子部署到服務(wù)器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick2019-05-05
這篇文章主要介紹了vue3中的props組件抽離，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
利用vite創(chuàng)建vue3項目的全過程及一個小BUG詳解
Vite作為一個構(gòu)建工具,提供了一種快速的方法來構(gòu)建Vue應(yīng)用,而Vue3?則是一個前端框架,提供了強大的功能來構(gòu)建和管理前端項目,下面這篇文章主要給大家介紹了關(guān)于利用vite創(chuàng)建vue3項目的全過程及一個小BUG的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue路由懶加載是一種優(yōu)化技術(shù),旨在減少應(yīng)用程序的初始加載時間并提高性能,這篇文章給大家介紹vue路由懶加載的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了vue內(nèi)嵌iframe跨域通信,主要介紹了Vue組件中如何引入iframe，vue如何獲取iframe對象以及iframe內(nèi)的window對象，結(jié)合實例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列
這篇文章主要介紹了vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列 ,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了bing Map 在vue項目中的使用,需要的朋友可以參考下2018-04-04