前言：
本人的前端开发历程中，ui框架使用过饿了么，iview，antd-desgin(react),vant,uni-app,之前还一直没有使用过ant-desgin-vue，此框架用的人不知道多不多，反正用起来挺难受。下面简单介绍使用其表格，分页，弹框组件，结合接口实现增删改查最简单的要求。
<template>
<div class="userSet-warp">
<!-- 头部 -->
<div class="head">
<div class="left-head">
<div class="input">
<p>用户名称：</p>
<a-input v-model="searchvalue" placeholder="请输入用户名称" @change="getInputValue"></a-input>
</div>
<div class="middule-head">
<a-button type="primary" @click="gotoSearch"
>查询</a-button
>
<a-button type="primary" @click="reset">重置</a-button>
</div>
</div>
<div class="right-head">
<a-button type="primary" @click="addUser">新增</a-button>
</div>
</div>
<!-- 表格 -->
<div class="table-content">
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination"
@change="handleTableChange"
:rowKey="(record) => record.id"
>
<a slot="name" slot-scope="text">{{ text }}</a>
<a slot="sub" slot-scope="text">{{ text }}</a>
<a slot="createDate" slot-scope="text">{{ text }}</a>
<a slot="remark" slot-scope="text">{{ text }}</a>
<span slot="action" slot-scope="text, record">
<a-button type="primary" @click="fixfunc(record)">修改</a-button
>
<a-button type="primary" @click="authority(record)">权限</a-button
>
<a-button type="primary" @click="removeInfo(record)">删除</a-button>
</span>
</a-table>
</div>
<!-- 新增弹框 -->
<add-user
:modelProps="modelProps"
@refresh="getUserList"
></add-user>
<!-- 修改弹框 -->
<edit-user
:editUserProps="editUserProps"
@refresh="getUserList"
> </edit-user>
<!-- 权限弹框 -->
<!-- <authority-modify
:authorityProps="authorityProps"
>
</authority-modify> -->
<authority-modify1
:authorityProps="authorityProps"
>
</authority-modify1>
</div>
</template>
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;
},
},
};
</script>
效果如图：
![image]( "image")
查看原文
本人的前端开发历程中，ui框架使用过饿了么，iview，antd-desgin(react),vant,uni-app,之前还一直没有使用过ant-desgin-vue，此框架用的人不知道多不多，反正用起来挺难受。下面简单介绍使用其表格，分页，弹框组件，结合接口实现增删改查最简单的要求。
