常用页面模板 ANTD VUE

一. 空白页面

<template>
    <div class="container" id="container">

    </div>
</template>
<script>
export default {
   name:"",
   data() {
      return {
      }
   },
   created() {
   },
   methods: {
   }
}
</script>
<style lang="less" scoped>
	.container{
		width: 100%;
		height: 100%;
	}
</style>

二. 表格

1. 简单表格，带分页

<template>
  <div class="container" id="container">
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :pagination="pagination"
      @change="tableChange"
      :loading="loading"
      rowKey="id"
    ></a-table>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      tableData: [], // 表格数据
      tableColumns: [], // 表格列名
      loading: false, // 表格加载效果
      pagination: {
        total: 0, // 数据总数
        current: 1, // 当前页数
        pageSize: 10, // 每页数量
        showTotal: (total) => `共 ${total} 条数据`, // 展示总共有几条数据
        showSizeChanger: true, // 显示修改pageSize的下拉框
        pageSizeOptions: ['5', '10', '20'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
        // eslint-disable-next-line no-return-assign
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      }
    }
  },
  created() {
	  // 设置tableColumns 
	  // 通过接口请求数据，放入tableData 
  },
  methods: {
    tableChange(pagination) {
      // 表格翻页
      this.pagination = pagination
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

2. 表格内详情弹窗

<template>
  <div class="container" id="container">
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :pagination="pagination"
      @change="tableChange"
      :loading="loading"
      rowKey="id"
    >
      <template #slot="record">
        <a-button type="link" @click="handleDetail(record)">详情</a-button>
      </template>
    </a-table>
     <!-- 弹窗内容 -->
    <a-modal
      v-model="visible"
      :title="modal.title"
      :footer="false"
      :afterClose="clearModal"
      width="50%"
    >
      <a-table
        :dataSource="modal.tableData"
        :columns="modal.tableColumns"
        :pagination="modal.pagination"
        @change="modalTableChange"
        :loading="modal.loading"
        rowKey="id"
        :scroll="{ x: false, y: 500 }"
      >
      </a-table>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      tableData: [], // 表格数据
      tableColumns: [], // 表格列名
      loading: false, // 表格加载效果
      pagination: {
        // 表格分页
        total: 0, // 数据总数
        current: 1, // 当前页数
        pageSize: 10, // 每页数量
        showTotal: (total) => `共 ${total} 条数据`, // 展示总共有几条数据
        showSizeChanger: true, // 显示修改pageSize的下拉框
        pageSizeOptions: ['5', '10', '20'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
        // eslint-disable-next-line no-return-assign
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },

      visible: false,
      modal: {
        title: '', // 弹窗标题
        tableData: [], // 表格数据
        tableColumns: [], // 表格列名
        loading: false, // 表格加载效果
        pagination: {
          total: 0, // 数据总数
          current: 1, // 当前页数
          pageSize: 10, // 每页数量
          showTotal: (total) => `共 ${total} 条数据`, // 展示总共有几条数据
          showSizeChanger: true, // 显示修改pageSize的下拉框
          pageSizeOptions: ['5', '10', '20'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
          // eslint-disable-next-line no-return-assign
          onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
        }
      }
    }
  },
  created() {
    this.tableColumns = [
      { title: '更多', key: 'detail', scopedSlots: { customRender: 'detail' } }
    ]
  },
  methods: {
    tableChange(pagination) {
      // 表格翻页
      this.pagination = pagination
    },
    modalTableChange(pagination) {
      // 弹窗表格翻页
      this.modal.pagination = pagination
    },
    clearModal() {
      this.modal.title = ''
      this.modal.tableData = []
      this.modal.pagination.current = 1
      this.modal.pagination.pageSize = 10
      this.modal.pagination.total = 0
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>

三. 表单

提交查询，重置表单，展开表单

<template>
  <div class="container" id="container">
    <div class="formBox">
      <a-form class="search-form" :form="form" @submit="handleSearch">
        <a-row :gutter="24">
          <a-col
            v-for="(formItem, i) in formList"
            :key="formItem.value"
            :span="6"
            :style="{ display: i < count ? 'block' : 'none' }"
          >
            <a-form-item :label="formItem.label">
              <a-input
                v-decorator="[formItem.value]"
                :placeholder="`请输入${formItem.label}`"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" html-type="submit"> 查询 </a-button>
            <a-button style="margin-left: 8px" @click="handleReset">
              重置
            </a-button>
            <a
              style=" margin-left: 8px, font-size: 12px "
              @click="() => (expand = !expand)"
            >
              {{ expand ? '收起' : '展开' }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      expand: false,
      form: this.$form.createForm(this, { name: 'search-form' }),
      formList: []
    }
  },
  computed: {
    count() {
      return this.expand ? 99 : 4
    }
  },
  created() {
  	// 此处写表单项
    this.formList = [
      { label: 'a', value: 'a' },
      { label: 'b', value: 'b' }
    ]
  },
  methods: {
    handleSearch(e = undefined) {
      // 点击搜索
      if (e) {
        e.preventDefault()
        // 若有表格数据，则把表格页码回到1
        // this.pagination.current = 1
      }
      this.form.validateFields((error, values) => {
        console.log('error', error)
        console.log('values ', values)
        if (!error) {
        	// 此处写查询函数
        }
      })
    },
    handleReset() {
      // 清空表单
      this.form.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
.search-form {
  padding: 24px 0;
}

.search-form .ant-form-item,
.modal-form .ant-form-item,
.ant-form-item {
  display: flex;
}
/deep/.search-form .ant-form-item-control-wrapper,
.modal-form .ant-form-item-control-wrapper {
  flex: 1;
}
#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
.modal-form .ant-form-item {
  margin: 0;
}
/deep/.modal-form .ant-form-item-control-wrapper {
  width: 90%;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>