使用ant-desgin-vue框架开发

前言：

本人的前端开发历程中，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
          >&nbsp;&nbsp;
          <a-button type="primary" @click="authority(record)">权限</a-button
          >&nbsp;&nbsp;
          <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>

效果如图：