前言：
本人的前端开发历程中，ui框架使用过饿了么，iview，antd-desgin(react),vant,uni-app,之前还一直没有使用过ant-desgin-vue，此框架用的人不知道多不多，反正用起来挺难受。下面简单介绍使用其表格，分页，弹框组件，结合接口实现增删改查最简单的要求。
import AddUser from "../components/addUser.vue";
import editUser from "../components/editUser.vue";
import authorityModify from "../components/authorityModify"
import authorityModify1 from "../components/authorityModify1"
export default {
name: "index",
components: {
AddUser,
editUser,
authorityModify,
authorityModify1
},
data() {
return {
modelProps: {
modelSwitch: false,
},
editUserProps: {
name: "",
remark: "",
modelSwitch: false,
},
authorityProps: {
modelSwitch: false,
},
searchvalue: "",
current: 1,
selectedRowKeys: [],
pagination: {
defaultCurrent: 1, // 默认当前页数
defaultPageSize: 10, // 默认每页显示数量
showSizeChanger: true, // 显示可改变每页数量
pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
showTotal: (total) => `总共 ${total} 条`, // 显示总数
onShowSizeChange: (defaultCurrent, defaultPageSize) =>
(this.defaultPageSize = defaultPageSize), //// 改变每页数量时更新显示
},
columns: [
{
dataIndex: "index",
key: "序号",
title: "序号",
customRender: (text, record, index) =>
`${
(this.pagination.defaultCurrent - 1) * this.pagination.defaultPageSize +
index +
1
}`,
},
{
title: "用户名称",
dataIndex: "name",
key: "name",
scopedSlots: { customRender: "name" },
},
{
title: "添加时间",
dataIndex: "createDate",
key: "createDate",
scopedSlots: { customRender: "createDate" },
},
{
title: "用户描述",
key: "remark",
dataIndex: "remark",
scopedSlots: { customRender: "remark" },
},
{
title: "操作",
key: "action",
scopedSlots: { customRender: "action" },
},
],
data: [
],
};
},
mounted() {
this.getUserList();
this.getUserPagination();
},
methods: {
//权限：
authority(){
console.log("权限修改");
this.authorityProps.modelSwitch = true;
},
//删除
removeInfo(id) {
const url = "/api/user/delete";
const ids = [];
ids.push(id.id);
console.log(ids, "000");
// let obj ={};
// obj = ids;
this.$Ajax.post(url, {value: ids}).then((e) => {
if (e.success) {
console.log("删除成功");
this.getUserList();
}
});
},
// 获取input框输入值
getInputValue(value) {
console.log(value,'9999');
},
//addUser 新增弹框 显示
addUser() {
console.log("addUser");
this.modelProps.modelSwitch = true;
},
//分页时间触发的方法
handleTableChange(pagination) {
console.log(pagination,'分页信息里面的东西');
this.pagination.defaultCurrent = pagination.defaultCurrent;
this.pagination.pageSize = pagination.pageSize;
// this.queryParam.page = pagination.current;
// this.queryParam.size = pagination.pageSize;
this.getUserList();
this.getUserPagination();
},
//重置：
reset() {
this.searchvalue = "";
},
//查询用户数据
gotoSearch(searchvalue) {
console.log(this.searchvalue, "searchvalue值");
const url = "/api/user/queryPage";
const getData = {
name: "name",
value: this.searchvalue
};
if(this.searchvalue==""){
this.getUserList();
}else{
this.$Ajax.post(url,getData).then((e) => {
if (e.success) {
console.log(e.result, "success");
this.data = e.result.list;
this.pagination.defaultCurrent = e.result.page.pageNo;
this.pagination.pageSize = e.result.page.pageSize;
}
});
}
},
// 查询用户设置数据列表
getUserList() {
const url1 = "/api/user/queryList"
// const url = "/api/user/queryPage";
const getData = {
name: this.searchvalue,
};
// const name = this.searchvalue;
this.$Ajax.post(url1, getData).then((e) => {
if (e.success) {
console.log(e.result, "success");
this.data = e.result;
// this.pagination.defaultCurrent = e.result.page.pageNo;
// this.pagination.pageSize = e.result.page.pageSize;
}
});
},
// 查询分页
getUserPagination(){
const url = "/api/user/queryPage";
const getData = {
name: this.searchvalue,
};
this.$Ajax.post(url,getData).then((e) => {
if (e.success) {
console.log(e.result, "success");
this.pagination.defaultCurrent = e.result.page.pageNo;
this.pagination.pageSize = e.result.page.pageSize;
}
});
},
// 修改
fixfunc(row) {
console.log(row, "9999");
this.editUserProps.modelSwitch = true;
this.editUserProps.name=row.name;
this.editUserProps.remark=row.remark;
this.editUserProps.id=row.id;
},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
},
};
效果如图：
