mixin文件夹创建三个文件一个index.js 一个pagination.js 一个selection.js
index.js
export {default as pagination} from './pagination'
export {default as selection} from './selection'
pagination.js
export default {
data () {
return {
page_params: {
page: 1,
size: 10,
total: 0,
keyword: '',
handleCurrentChange: this.handleCurrentChange,
handleSizeChange: this.handleSizeChange
}
}
},
activated () {
if (this.$store.state.search_flag) {
this.page_params.keyword && (this.page_params.keyword = '')
}
this.getList && this.getList()
},
methods: {
// 分页
handleCurrentChange (pageId) {
this.page_params.page = pageId
this.getList()
},
// 分页size
handleSizeChange (pageSize) {
this.page_params.page = 1
this.page_params.size = pageSize
this.getList()
},
// 搜索
goSearch (is) {
this.page_params.page = 1
this.page_params.size = 10
this.getList(is)
}
}
}
selection.js
// 带复选框的el-table需要添加的属性和事件
// @selection-change="selectionChange"
// @row-click="rowClick"
// ref="table"
export default {
data() {
return {
selection: [], // 选中的数据
format_selection: [], // 格式化后的选中数据
void_disabled: true, // 没有元素被选中时,按钮的禁用状态
setOnSelf_disabled: true, // 设置上架按钮禁用状态
audit_disabled: true // 设置审核按钮禁用状态
}
},
methods: {
// 勾选复选框
selectionChange(selection) {
this.selection = selection
this.void_disabled = !selection.length
},
// 点击行自动勾选复选框
rowClick(row) {
this.$refs.table.toggleRowSelection(row)
},
// 反选
antiSelection() {
this.$refs.table.data.forEach(row => {
this.$refs.table.toggleRowSelection(row)
})
},
// 格式化选择框数据
formatData(attr) {
this.format_selection = []
this.selection.forEach(item => {
this.format_selection.push(item[attr])
})
},
// 删除确认框
deleteSelection() {
this.$confirm(this.$t('confirmToDelete') + '?', this.$t('tips'), {
confirmButtonText: this.$t('confirm'),
cancelButtonText: this.$t('cancel'),
type: 'warning'
})
.then(() => {
this.deleteData()
})
.catch(() => {})
},
// 成功提示
successMsg(res) {
this.$notify({
title: this.$t('success'),
message: res.tips,
type: 'success'
})
this.getList()
}
}
}
使用
import { pagination, selection } from '@/mixin'
mixins: [pagination, selection],
this.formatData('id') // 拿id 参数 this.format_selection.join(',')
// 这是下面移除和反选
computed: {
btn_list() {
return [
{
name: 'Inverse',
method: this.antiSelection
},
{
name: 'remove',
method: this.deleteSelection,
disabled: this.void_disabled,
loading: this.deleteSelectionLoading
}
]
}
},