vue做一个分页对左边的分组进行分页，源代码如下，使用分页后分组并不显示，并点击红色部分时，控制台报错。当点击绿色页码部分时，控制台也报错，检查很多遍了，一直没找到解决办法！希望各位看看！
<template>
<div v-if="type == 'image'">
<div v-if="myValue">
<ul class="el-upload-list el-upload-list--picture-card">
<li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'">
<div v-if="typeT && typeT == 1">
<img :src="myValue" alt="" class="el-upload-list__item-thumbnail">
</div>
<div v-else>
<img :src="myValue" alt="" class="el-upload-list__item-thumbnail">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-delete" @click="deleteMaterial">
<i class="el-icon-delete" />
</span>
</span>
</div>
</li>
</ul>
</div>
<div v-if="!myValue && !(typeT && typeT == 1)" tabindex="0" class="el-upload el-upload--picture-card"
:style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'" @click="toSeleteMaterial">
<i class="el-icon-plus" />
</div>
<el-dialog append-to-body :visible.sync="dialogVisible" width="35%">
<img :src="url" alt="" style="width: 100%">
</el-dialog>
<el-dialog class="pic-dialog" title="图片素材库" append-to-body :visible.sync="listDialogVisible" width="70%">
<el-container>
<el-aside width="unset">
<div style="margin-bottom: 10px">
<el-button class="el-icon-plus" size="small" @click="materialgroupAdd()">
添加分组
</el-button>
</div>
<el-input v-model="name" placeholder="分组名称" size="mini" style="width: 220px" clearable class="mb5 input-with-select"
@keyup.enter.native="materialgroupPage">
<el-button slot="append" icon="el-icon-search" @click="materialgroupPage" />
</el-input>
<el-tabs v-model="materialgroupObjId" v-loading="materialgroupLoading" tab-position="left" @tab-click="tabClick">
<el-tab-pane v-for="item in materialgroupList" :key="item.id" :name="item.id">
<span slot="label" :title="item.name" > {{ item.name }}</span>
</el-tab-pane>
</el-tabs>
<el-pagination
@size-change="sizechange"
@current-change="currentchange"
:current-page="materialgroupList.pagenum"
:page-sizes="[10,15,25,35]"
:page-size="materialgroupList.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="page1">
</el-pagination>
</el-aside>
<el-main>
<el-card>
<div slot="header">
<el-row>
<el-col :span="12">
<span>{{ materialgroupObj.name }}</span>
<span v-if="materialgroupObj.id != '-1'">
<el-button size="small" type="text" class="el-icon-edit" style="margin-left: 10px;" @click="materialgroupEdit(materialgroupObj)">
重命名</el-button>
<el-button size="small" type="text" class="el-icon-delete" style="margin-left: 10px;color: red"
@click="materialgroupDelete(materialgroupObj)">删除</el-button>
</span>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-upload :action="uploadApi" :headers="headers" :file-list="[]" :on-progress="handleProgress" :before-upload="beforeUpload"
:on-success="handleSuccess" :data="{type: 1, stcFlag: $route.name == 'ProductEdit' ? true : false}" multiple>
<el-button size="small" type="primary">批量上传</el-button>
</el-upload>
</el-col>
</el-row>
</div>
<div v-loading="tableLoading">
<el-input v-model="page.name" placeholder="图片名称" size="mini" style="width: 300px" clearable class="mb5 input-with-select"
@keyup.enter.native="toQuery">
<el-button slot="append" icon="el-icon-search" @click="toQuery" />
</el-input>
<el-alert v-if="tableData.length <= 0" title="暂无数据" type="info" :closable="false" center show-icon />
<el-row :gutter="5">
<!-- :max="num - myValue.length" -->
<el-checkbox-group v-model="urls" :max="num">
<el-col v-for="(item,index) in tableData" :key="index" :span="4">
<el-card :body-style="{ padding: '5px' }">
<el-image style="width: 100%; height: 100px" :src="item.url" fit="contain" :preview-src-list="[item.url]" :z-index="999" />
<p class="p-style p-line" :title="item.name">{{ item.name }}</p>
<div class="text-center">
<el-checkbox class="material-name" :label="item.url">
选择
</el-checkbox>
<el-row>
<el-col :span="24" class="col-do">
<el-button type="text" size="medium" @click="materialDel(item)">删除</el-button>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-checkbox-group>
</el-row>
<el-pagination :current-page.sync="page.currentPage" :page-sizes="[12, 24]" :page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="page.total" class="pagination" @size-change="sizeChange"
@current-change="pageChange" />
</div>
</el-card>
</el-main>
</el-container>
<span slot="footer" class="dialog-footer">
<el-button @click="listDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sureUrls">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getList as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
name: 'MaterialList',
props: {
// 素材数据
value: {
type: String,
default: ''
},
// 素材类型
type: {
type: String,
default: ''
},
// 素材限制数量，默认5个
num: {
type: Number,
default () {
return 5
}
},
typeT: {
type: Number,
default: 0
},
// 宽度
width: {
type: Number,
default () {
return 150
}
},
// 宽度
height: {
type: Number,
default () {
return 150
}
}
},
data () {
return {
name: '',
headers: {
Authorization: getToken()
},
dialogVisible: false,
myValue: this.value,
url: '',
listDialogVisible: false,
materialgroupObjId: '',
materialgroupObj: {},
materialgroupLoading: false,
tableData: [],
resultNumber: 0,
materialgroupList:{
type:3,
pagenum:1,
pagesize:10
},
total:0,
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 12, // 每页显示多少条
ascs: [], // 升序字段
descs: 'create_time', // 降序字段
name: ''
},
tableLoading: false,
groupId: null,
urls: []
}
},
computed: {
...mapGetters([
'uploadApi'
])
},
watch: {
value: function (val) {
this.myValue = val
}
},
methods: {
toQuery () {
this.page.currentPage = 1
this.getPage(this.page)
},
moveMaterial (index, type) {
if (type === 'up') {
const tempOption = this.value[index - 1]
this.$set(this.value, index - 1, this.value[index])
this.$set(this.value, index, tempOption)
}
if (type === 'down') {
const tempOption = this.value[index + 1]
this.$set(this.value, index + 1, this.value[index])
this.$set(this.value, index, tempOption)
}
},
zoomMaterial (index) {
this.dialogVisible = true
this.url = this.value[index]
},
deleteMaterial () {
const that = this
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
that.myValue = ''
that.urls = []
that.$emit('input', that.myValue)
sessionStorage.removeItem('img')
})
},
toSeleteMaterial () {
this.listDialogVisible = true
this.materialgroupPage()
if (sessionStorage.getItem('img')) {
this.urls = [sessionStorage.getItem('img')]
}
},
materialgroupPage () {
this.materialgroupLoading = true
materialgroupPage({
total: 0, // 总页数
page: 1, // 当前页数
size: 100, // 每页显示多少条
ascs: [], // 升序字段
sort: 'create_time,desc', // 降序字段
stcFlag: this.$route.name === 'ProductEdit',
name: this.name || ''
}).then(response => {
this.materialgroupLoading = false
const materialgroupList = response
console.log(materialgroupList);
this.total = materialgroupList.totalElements
materialgroupList.unshift({
id: '-1',
name: '全部分组'
})
sessionStorage.setItem('groupList', JSON.stringify(materialgroupList))
this.materialgroupList = materialgroupList
this.tabClick({
index: 0
})
})
},
materialgroupDelete (materialgroupObj) {
const that = this
this.$confirm('是否确认删除该分组？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
materialgroupDel(materialgroupObj.id)
.then(function () {
that.$delete(that.materialgroupList, materialgroupObj.index)
})
})
},
materialgroupEdit (materialgroupObj) {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: materialgroupObj.name
}).then(({ value }) => {
materialgroupEdit({
id: materialgroupObj.id,
name: value
}).then(function () {
materialgroupObj.name = value
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
})
}).catch(() => {
})
},
materialgroupAdd () {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
materialgroupAdd({
name: value
}).then(function () {
that.materialgroupPage()
})
}).catch(() => {
})
},
tabClick (tab, event) {
if (tab.index === 0) {
if (sessionStorage.getItem('img')) {
this.urls = [sessionStorage.getItem('img')]
} else {
this.urls = []
}
} else {
this.urls = []
}
const index = Number(tab.index)
const materialgroupObj = this.materialgroupList[index]
materialgroupObj.index = index
this.materialgroupObj = materialgroupObj
this.materialgroupObjId = materialgroupObj.id
this.page.currentPage = 1
this.page.total = 0
if (materialgroupObj.id !== '-1') {
this.groupId = materialgroupObj.id
} else {
this.groupId = null
}
this.getPage(this.page, tab.index)
},
getPage (page, index) {
this.tableLoading = true
getPage(Object.assign({
page: page.currentPage - 1,
size: page.pageSize,
descs: this.page.descs,
ascs: this.page.ascs,
sort: 'create_time,desc',
stcFlag: this.$route.name === 'ProductEdit',
name: this.page.name
}, {
groupId: this.groupId
})).then(response => {
const tableData = response.content
this.page.total = response.totalElements
this.page.currentPage = page.currentPage
this.page.pageSize = page.pageSize
this.tableData = tableData
if (index === 0) {
sessionStorage.setItem('imgObj', JSON.stringify(response))
}
this.tableLoading = false
}).catch(() => {
this.tableLoading = false
})
},
sizechange(val){
this.materialgroupPage.pagesize = val
this.materialgroupPage()
},
currentchange(val){
this.materialgroupPage.pagenum = val
this.materialgroupPage()
},
sizeChange (val) {
this.page.currentPage = 1
this.page.pageSize = val
this.getPage(this.page)
},
pageChange (val) {
this.page.currentPage = val
// this.page.pageSize = val
this.getPage(this.page)
},
materialRename (item) {
const that = this
this.$prompt('请输入素材名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.name
}).then(({ value }) => {
putObj({
id: item.id,
name: value
}).then(function () {
that.getPage(that.page)
})
}).catch(() => {
})
},
materialUrl (item) {
this.$prompt('素材链接', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.url
}).then(({ value }) => {
}).catch(() => {
})
},
materialDel (item) {
const that = this
this.$confirm('是否确认删除该素材？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
delObj(item.id)
.then(function () {
that.getPage(that.page)
})
})
},
handleCommand (command) {
const that = this
const s = command.split('-')
putObj({
id: s[0],
groupId: s[1]
}).then(function () {
that.getPage(that.page)
})
},
handleProgress (event, file, fileList) {
// console.log(event)
// let uploadProgress = file.percentage.toFixed(0)
// this.uploadProgress = uploadProgress
},
handleSuccess (response, file, fileList) {
const that = this
this.uploadProgress = 0
addObj({
type: '1',
groupId: this.groupId !== '-1' ? this.groupId : null,
name: file.name,
url: response.link
}).then(() => {
this.resultNumber++
if (fileList.length === this.resultNumber) {
that.getPage(that.page, 0)
this.resultNumber = 0
}
})
},
beforeUpload (file) {
const isPic =
file.type === 'image/jpeg' ||
file.type === 'image/png' ||
file.type === 'image/gif' ||
file.type === 'image/jpg' ||
file.type === 'video/mp4'
const isLt2G = file.size / 1024 / 1024 < 2147483648
if (!isPic) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF、mp4格式!')
return false
}
if (!isLt2G) {
this.$message.error('上传头像图片大小不能超过 2G!')
}
return isPic && isLt2G
},
sureUrls () {
this.myValue = this.urls[0]
this.$emit('input', this.urls[0])
if (this.myValue) {
sessionStorage.setItem('img', this.myValue)
} else {
sessionStorage.removeItem('img')
}
this.listDialogVisible = false
}
}
}
</script>
<style lang="scss" scoped>
从报错 index 为undefined
unshift 不是一个函数
materialgroupList你定义的不是一个对象吗？你上面又用这个去循环
materialgroupList这是数组还是对象？unshift方法是数组的。