zoukankan      html  css  js  c++  java
  • 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_19-CMS前端页面查询开发-页面原型-Table组件测试

    页面填充内容。用一个表格来显示内容
    3.1.2.1 Element-UI介绍
    本项目使用Element-UI来构建界面,Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
    件库。
    Element-UI官方站点:http://element.eleme.io/#/zh-CN/component/installation


    复制示例的代码

    <template>
      <el-table
        :data="tableData"
        style=" 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }]
          }
        }
      }
    </script>





    新加一列 就是复制



    json的数据 有三个属性

    加查询按钮



    最终代码

    <template>
      <div>
        <el-button type="primary">查询按钮</el-button>
        <el-table
          :data="tableData"
          style=" 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="address111"
            label="测试列">
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }]
          }
        }
      }
    </script>






     

  • 相关阅读:
    javascript专业八级测试答案整理
    HTML中的attribute和property
    Ajax的原理和应用
    jQuery提交form表单
    使用JavaScript和Canvas实现下雪动画效果
    JavaScript经典代码总结
    从HTML5移动应用现状谈发展趋势
    前端单元测试总结及测试工具介绍
    Web缓存基础:术语、HTTP报头和缓存策略
    为IIS Express添加MIME映射
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/11562069.html
Copyright © 2011-2022 走看看