vue前端简单页面编写

Html部分：

代码框架：

<template>
    <!--  请求栏：输入框、选择框、日期框 + 查询、重置  范例如下-->
  <div class="table-page-search-wrapper">
    <a-col :md="8" :sm="24">
      <a-form-item label="用户ID" style="font-weight: 500;font-size: 16px;">
        <a-input v-decorator="['uid']" style="margin-left: 10px" placeholder="请输入"/>
      </a-form-item>
  	</a-col>
  </div>
  
    <!--  功能栏：新增、导出、自定义列    范例如下-->
  <div class="table-operator">
      <a-button type="primary" icon="export" @click="handleDownload()">导出</a-button>
  </div>
  
    <!--  数据展示栏：展示格式     范例如下-->
  <s-table
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"     //数据展示条目
      :data="loadData"       //获取数据
      showPagination="auto"
    >
    <!--  包含slot插槽（对应数据格式）  范例如下-->
    <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
    </span>
  </s-table>
   <!-- 引用外部modal，@ok处理返回数据    范例如下-->
  <product-info-modal ref="productInfoModal" @ok="handleOk"/>
</template>

请求栏样式参考图：

---

功能栏样式参考图：

---

---

JavaScript部分：

代码框架：

<script>
  import 函数 from 路径  //引用外部函数 common方法与非common方法
  const Map={}         //常量设定
  export default {     //输出
    components:{       //组件
    },
    data() {
      return{
        //参数设定
        //数据输出
        loadData: 从后端调用页面数据返回
      }
    },
    //处理slot插槽，调用Map常量返回
    fliters:{
    },
    //页面加载前进行的数据创建
    created(){
    },
    //处理html调用的方法
    methods:{
    } 
  }
</script>