vue对于表操作的混入封装

mixins / list.js

export default {
data() {
return {
loading: true, // 遮罩
queryParams: {}, // 查询参数对象
tableData: null, // 表格数据
dataUrl: '', // 表格数据url
checkItems: [], // 被选中对象
total: 0
}
},
computed: {
ids() {
const arr = []
this.checkItems.map(v => {
arr.push(v.id)
})
return arr
},
batchStatus() {
if (this.checkItems.length > 0) {
return true
} else {
return false
}
}
},
methods: {
query() {
this.getTableData(this.dataUrl, this.queryParams)
},
getTableData(url, params) { // 获取表格数据
this.dataUrl = url
this.$http.$get(url, params)
.then(res => {
this.tableData = res.data.content
this.total = res.data.totalElements
this.loading = false
})
.catch(res => {
this.loading = false
this.$errorMessage('加载失败，请重试！')
})
},
getCheckItems(obj) { // 获取全选数据
this.checkItems = obj
},
getPage(current, size) { // 翻页方法
this.queryParams.page = current - 1 // 后台翻页从0开始的所以减1
this.queryParams.size = size
this.getTableData(this.dataUrl, this.queryParams)
},
deleteTableData(url, id) { // 删除参数为ids的使用当前方法
this.$confirm('您确定删除此条数据吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.$http.$post(url, { ids: [id] }).then(res => {
if (res.code === '200') {
this.$successMessage('删除成功!')
this.getTableData(this.dataUrl, this.queryParams)
} else {
this.$errorMessage('删除失败,' + res.message)
}
})
})
.catch(() => {})
}
}
}