基于Ant Design vue框架 单个界面的crud操作

我们还是先来看看效果图吧~~~

当然了，分页也是可以用的哈~

以上就是简单的一个总的页面，由于程序较多，所以，俺们还是分阶段来写，我们先把整个页面的代码拷出来吧。至于crud都是基于这个画面进行操作的哈。。。。

主页面代码拷贝：

<a-card :bordered="false">
    <!------------------------  以下是用户页面展示上方的查询条件以及其他查询和重置  ----------------------------------->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="用户编号">
              <a-input v-model="queryParam.id" placeholder />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="姓名">
              <a-input v-model="queryParam.account" placeholder />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" shape="round" @click="$refs.table.refresh(true)" icon="search">查询</a-button>
              <a-button type="primary" shape="round"style="margin-left: 8px" @click="() => queryParam = {}" icon="reload">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-----------------------------------  以下是功能性功能的书写   ----------------------------------->
    <div class="table-operator">
      <a-button type="primary" shape="round" icon="plus" @click="$refs.createModal.add()">新建</a-button>
      <a-upload name="file" :showUploadList="false" :beforeUpload="beforeUpload"  @change="userImport">
          <a-button type="primary" shape="round"> <a-icon type="cloud-upload-o"/>用户导入</a-button>
      </a-upload>
      
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
      showPagination="auto"
    >
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
      <span slot="status" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span>
      <span slot="description" slot-scope="text">
        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
      </span>

      <!-----------------------------------  以下是用户操作后显示的功能，针对单个数据所能做的修改和删除功能  ------------------------------------>
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" shape="round" style="margin-right: 5px" @click="handleEdit(record)">
          <a-icon type="edit" />修改</a-button>
        <a-button type="danger" size="small" shape="round" style="margin-left: 5px" @click="() => del(record)">
          <a-icon type="delete" />删除</a-button>
      </span>
    </s-table>
    <information ref="createModal" @ok="handleOk" />
    <modification ref="modal" @ok="handleOk" />
  </a-card>

以下有需要说明的是：

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    'information': NewUserInformation,
    'modification': UserInformationModification
  },
  data() {
    return {
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '用户编号',
          dataIndex: 'id',
          width: '120px',
          fixed: 'left'
        },
        {
          title: '姓名',
          dataIndex: 'account',
          width: '120px',
          scopedSlots: { customRender: 'account' }
        },
        {
          title: '用户身份',
          dataIndex: 'adminName',
          width: '120px',
          scopedSlots: { customRender: 'adminName' }
        },
        {
          title: '身份证号码',
          dataIndex: 'idCard',
          width: '120px',
          scopedSlots: { customRender: 'idCard' }
        },
        {
          title: '用户地址',
          dataIndex: 'address',
          width: '180px',
          scopedSlots: { customRender: 'address' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      /**
        * @description  页面查询的接口 selectUser：跳转后台路由，返回数据
        * @fileName TableList.vue
        * @author wjb
        * @date 2020/05/27 13:35:00
        */
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return selectUser(Object.assign(parameter, this.queryParam)).then(res => {
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      // custom table alert & rowSelection
      options: {
        alert: {
          show: true,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: false
    }
  },
  created() {
    // this.tableOption()
    // getRoleList({ t: new Date() })
  },
  methods: {
      /**
        * @description  用户单个修改方法
        * @fileName TableList.vue
        */
    handleEdit(record) {
      this.$refs.modal.edit(record)
    },

    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },

    /**
        * @description  用户单个删除的方法
        * @fileName TableList.vue
        */
    del(record) {
      this.$confirm({
        title: '警告',
        content: `真的要删除用户编号为${record.id}的数据吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          deleteUser(record).then(
            location.reload()
          )
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    /**
      * @description  execl文件导入先进行文件判断在进行插入
      * @param 202行则是对点数据进行切割字符串，结果返回由字符串元素组成的一个列表
      * @fileName TableList.vue
      */
      beforeUpload (file) {
          const fileName = file.name.split('.')
          const isJpgOrPng = fileName[fileName.length - 1] === 'xlsx' || fileName[fileName.length - 1] === 'xls'
          if (!isJpgOrPng) {
              this.$message.error('上传图片中存在非docx、xlsx的文件')
              return false
          }
        },
      userImport (file) {
            this.avatarLoading = true
            const formdata = new FormData()
            formdata.append('file', file.file)
          uploadFile(formdata).then(res => {
                this.visible = false
                this.confirmLoading = false
          }
        )
    }
  }
}

主页面的代码就到这里了，只是参考而已。下面的增删改都是基于这个画面进行跳转的。。那就趁热打铁去写增删改了，客观别着急。。稍后会把路径贴出来哈。。。。

新增功能可点这里哈：新增页面导航路由
修改功能可点这里哈：修改页面导航路由
删除功能可点这里哈：删除方法导航路由