• Element——组件

    element官网

    https://element.eleme.cn/#/zh-CN/component/layout

    vscode格式化快捷键：shift+alt+f 

    table表格

    1.   <template>
    2.     <el-table
    3.       :data="tableData"
    4.       style="width: 100%">
    5.       <el-table-column
    6.         prop="date"
    7.         label="日期"
    8.         width="180">
    9.       </el-table-column>
    10.       <el-table-column
    11.         prop="name"
    12.         label="姓名"
    13.         width="180">
    14.       </el-table-column>
    15.       <el-table-column
    16.         prop="address"
    17.         label="地址">
    18.       </el-table-column>
    19.     </el-table>
    20.   </template>
    21.  
    22.   <script>
    23.     export default {
    24.       data() {
    25.         return {
    26.           tableData: [{
    27.             date: '2016-05-02',
    28.             name: '王小虎',
    29.             address: '上海市普陀区金沙江路 1518 弄'
    30.           }, {
    31.             date: '2016-05-04',
    32.             name: '王小虎',
    33.             address: '上海市普陀区金沙江路 1517 弄'
    34.           }, {
    35.             date: '2016-05-01',
    36.             name: '王小虎',
    37.             address: '上海市普陀区金沙江路 1519 弄'
    38.           }, {
    39.             date: '2016-05-03',
    40.             name: '王小虎',
    41.             address: '上海市普陀区金沙江路 1516 弄'
    42.           }]
    43.         }
    44.       }
    45.     }
    46.   </script>

    分页

    1. <template>
    2.   <div>
    3.     <!-- 分页 -->
    4.     <el-pagination background layout="sizes,prev, pager, next,jumper,total" :total="1000"
    5.         @size-change="handleSizeChange"
    6.         @current-change="handleCurrentChange">
    7.     </el-pagination>
    8.   </div>
    9. </template>
    10.  
    11. <script>
    12. export default {
    13.   data() {
    14.     ......
    15.   },
    16.   methods: {
    17.     handleSizeChange:function(val){
    18.         alert("每页条数改变"+val)
    19.     },
    20.     handleCurrentChange:function(val){
    21.         alert("当前页面改变"+val)
    22.     }
    23.   },
    24. };
    25. </script>
    26. <style>
    27.  
    28. </style>

    对话框

    1. <template>
    2.   <div>
    3.     <!-- 对话框 -->
    4.     <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
    5.  
    6.     <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
    7.     <el-table :data="gridData">
    8.         <el-table-column property="date" label="日期" width="150"></el-table-column>
    9.         <el-table-column property="name" label="姓名" width="200"></el-table-column>
    10.         <el-table-column property="address" label="地址"></el-table-column>
    11.     </el-table>
    12.     </el-dialog>
    13.   </div>
    14. </template>
    15.  
    16. <script>
    17. export default {
    18.   data() {
    19.     return {
    20.         gridData: [{
    21.           date: '2016-05-02',
    22.           name: '王小虎',
    23.           address: '上海市普陀区金沙江路 1518 弄'
    24.         }, {
    25.           date: '2016-05-04',
    26.           name: '王小虎',
    27.           address: '上海市普陀区金沙江路 1518 弄'
    28.         }, {
    29.           date: '2016-05-01',
    30.           name: '王小虎',
    31.           address: '上海市普陀区金沙江路 1518 弄'
    32.         }, {
    33.           date: '2016-05-03',
    34.           name: '王小虎',
    35.           address: '上海市普陀区金沙江路 1518 弄'
    36.         }],
    37.         dialogTableVisible: false,
    38.         dialogFormVisible: false
    39. </script>
    40.  
    41. <style>
    42. </style>

     From表单

    1. <template>
    2.   <div>
    3.     <!-- 带表单的对话框 -->
    4.     <el-button type="text" @click="dialogFormVisible = true">打开嵌套form的 Dialog</el-button>
    5.  
    6.     <el-dialog title="form" :visible.sync="dialogFormVisible">
    7.         <el-form ref="form" :model="form" label-width="80px">
    8.             <el-form-item label="活动名称">
    9.                 <el-input v-model="form.name"></el-input>
    10.             </el-form-item>
    11.             <el-form-item label="活动区域">
    12.                 <el-select v-model="form.region" placeholder="请选择活动区域">
    13.                 <el-option label="区域一" value="shanghai"></el-option>
    14.                 <el-option label="区域二" value="beijing"></el-option>
    15.                 </el-select>
    16.             </el-form-item>
    17.             <el-form-item label="活动时间">
    18.                 <el-col :span="11">
    19.                 <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    20.                 </el-col>
    21.                 <el-col class="line" :span="2">-</el-col>
    22.                 <el-col :span="11">
    23.                 <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    24.                 </el-col>
    25.             </el-form-item>
    26.             <el-form-item>
    27.                 <el-button type="primary" @click="onSubmit">提交</el-button>
    28.                 <el-button>取消</el-button>
    29.             </el-form-item>
    30.         </el-form>
    31.  
    32.     </el-dialog>
    33.  
    34.   </div>
    35. </template>
    36.  
    37. <script>
    38. export default {
    39.   data() {
    40.     return {
    41.         form: {
    42.           name: '',
    43.           region: '',
    44.           date1: '',
    45.           date2: '',
    46.         }
    47.     };
    48.   },
    49.   methods: {
    50.     onSubmit(){
    51.         alert(JSON.stringify(this.form))//将对象转换为字符
    52.     }
    53.   },
    54. };
    55. </script>
    56.  
    57. <style>
    58. </style>

    源码

    1. <template>
    2.   <div>
    3.     <el-row>
    4.       <el-button>默认按钮</el-button>
    5.       <el-button type="primary">主要按钮</el-button>
    6.       <el-button type="success">成功按钮</el-button>
    7.       <el-button type="info">信息按钮</el-button>
    8.       <el-button type="warning">警告按钮</el-button>
    9.       <el-button type="danger">危险按钮</el-button>
    10.     </el-row>
    11.     <!-- 表格 -->
    12.     <el-table :data="tableData" style="width: 100%">
    13.       <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    14.       <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    15.       <el-table-column prop="address" label="地址"> </el-table-column>
    16.     </el-table>
    17.     <!-- 分页 -->
    18.     <el-pagination background layout="sizes,prev, pager, next,jumper,total" :total="1000"
    19.         @size-change="handleSizeChange"
    20.         @current-change="handleCurrentChange">
    21.     </el-pagination>
    22.  
    23.     <!-- 对话框 -->
    24.     <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
    25.  
    26.     <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
    27.     <el-table :data="gridData">
    28.         <el-table-column property="date" label="日期" width="150"></el-table-column>
    29.         <el-table-column property="name" label="姓名" width="200"></el-table-column>
    30.         <el-table-column property="address" label="地址"></el-table-column>
    31.     </el-table>
    32.     </el-dialog>
    33.     <br><br>
    34.     <!-- 带表单的对话框 -->
    35.     <el-button type="text" @click="dialogFormVisible = true">打开嵌套form的 Dialog</el-button>
    36.  
    37.     <el-dialog title="form" :visible.sync="dialogFormVisible">
    38.         <el-form ref="form" :model="form" label-width="80px">
    39.             <el-form-item label="活动名称">
    40.                 <el-input v-model="form.name"></el-input>
    41.             </el-form-item>
    42.             <el-form-item label="活动区域">
    43.                 <el-select v-model="form.region" placeholder="请选择活动区域">
    44.                 <el-option label="区域一" value="shanghai"></el-option>
    45.                 <el-option label="区域二" value="beijing"></el-option>
    46.                 </el-select>
    47.             </el-form-item>
    48.             <el-form-item label="活动时间">
    49.                 <el-col :span="11">
    50.                 <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    51.                 </el-col>
    52.                 <el-col class="line" :span="2">-</el-col>
    53.                 <el-col :span="11">
    54.                 <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    55.                 </el-col>
    56.             </el-form-item>
    57.             <el-form-item>
    58.                 <el-button type="primary" @click="onSubmit">提交</el-button>
    59.                 <el-button>取消</el-button>
    60.             </el-form-item>
    61.         </el-form>
    62.  
    63.     </el-dialog>
    64.  
    65.   </div>
    66. </template>
    67.  
    68. <script>
    69. export default {
    70.   data() {
    71.     return {
    72.         form: {
    73.           name: '',
    74.           region: '',
    75.           date1: '',
    76.           date2: '',
    77.         },
    78.         gridData: [{
    79.           date: '2016-05-02',
    80.           name: '王小虎',
    81.           address: '上海市普陀区金沙江路 1518 弄'
    82.         }, {
    83.           date: '2016-05-04',
    84.           name: '王小虎',
    85.           address: '上海市普陀区金沙江路 1518 弄'
    86.         }, {
    87.           date: '2016-05-01',
    88.           name: '王小虎',
    89.           address: '上海市普陀区金沙江路 1518 弄'
    90.         }, {
    91.           date: '2016-05-03',
    92.           name: '王小虎',
    93.           address: '上海市普陀区金沙江路 1518 弄'
    94.         }],
    95.         dialogTableVisible: false,
    96.         dialogFormVisible: false,
    97.         tableData: [
    98.         {
    99.           date: "2016-05-02",
    100.           name: "王小虎",
    101.           address: "上海市普陀区金沙江路 1518 弄",
    102.         },
    103.         {
    104.           date: "2016-05-04",
    105.           name: "王小虎",
    106.           address: "上海市普陀区金沙江路 1517 弄",
    107.         },
    108.         {
    109.           date: "2016-05-01",
    110.           name: "王小虎",
    111.           address: "上海市普陀区金沙江路 1519 弄",
    112.         },
    113.         {
    114.           date: "2016-05-03",
    115.           name: "王小虎",
    116.           address: "上海市普陀区金沙江路 1516 弄",
    117.         },
    118.       ],
    119.     };
    120.   },
    121.   methods: {
    122.     handleSizeChange:function(val){
    123.         alert("每页条数改变"+val)
    124.     },
    125.     handleCurrentChange:function(val){
    126.         alert("当前页面改变"+val)
    127.     },
    128.     onSubmit(){
    129.         alert(JSON.stringify(this.form))
    130.     }
    131.   },
    132. };
    133. </script>
    134.  
    135. <style>
    136. </style>

  • 相关阅读:
    Nginx反向代理和负载均衡
    基于深度学习的模糊认知图方法
    python使用sqlalchemy模块创建MySQL数据库连接、更新（update）数据库表中满足条件的数据
    让Git自动忽略指定文件
    Vue项目流程8，导航守卫的使用，图片懒加载，利用vee-validate实现表单验证，路由懒加载，打包并处理map文件
    iOS-系统弹窗调用，
    10分钟搞懂，Python接口自动化测试-接口依赖-实战教程
    [附源码]计算机毕业设计JAVA网上花店系统
    金仓数据库KingbaseES数据库管理员指南--12模式对象的管理
    分不清bind、apply、call？手写实现一下就明白了
  • 原文地址：https://blog.csdn.net/wlx2513/article/details/137893272