1、新建一个mixin.ts
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Mixin extends Vue {
// table 默认分页
private pages = {
page: 1,
row: 10
}
// 每页条数更改
private sizeChange(val: number) {
this.pages.row = val;
(this as any).getData()
}
// 页码更改查询
private currentChage(val: number) {
this.pages.page = val;
(this as any).getData()
}
// 清空表单
private clearForm(form: object, noClearName: string = '') {
for (let i in form) {
// if (i !== noClearName) if ((form as any)[i] !== null) (form as any)[i] = ''
if (i !== noClearName) (form as any)[i] = ''
}
}
// 去对象空KEY
private removeKeyOrNull(form: object) {
for (let i in form) {
(form as any)[i] === '' ? delete (form as any)[i] : ''
}
return form
}
// 删除提示
private promptAction(msg: string = '该操作不可逆是否继续') {
return new Promise((reslove: any, reject: any) => {
this.$confirm(msg).then(() => {
reslove();
}).catch(() => {
reject();
})
})
}
}
2、在main.ts引入
import mixin from './mixin'
Vue.mixin(mixin);
3、在组件中使用
// 获取用户
private getData() {
this.tableLoading = true;
(this as any).$axios
.get(
`user?page=${(this as any).pages.page}&rows=${
(this as any).pages.row
}
)
.then((res: any) => {
this.tableData = res.data;
this.tableLoading = false;
});
}