<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. 一分鐘帶你體驗html+vue+element-ui的絲滑

        發布時間:2020-12-22 15:41:11   作者:Java Pro   我要評論
      本文通過實例代碼給大家介紹了html vue element-ui的相關知識,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

      技術迷

      • html 網頁,你指定知道
      • vue 尤尤開發的前端框架
      • element 外賣團隊的前端ui

      在你的網頁的<title>標簽下添加

      <!-- 引入樣式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

      引入js

      html下面,<body>里加入

      <!-- 開發環境版本,包含了有幫助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!-- 引入組件庫 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>

      文件源碼

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <!-- 引入樣式 -->
          <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      </head>
      <body>
      
      <div id="app">
          <h1>{{ message }}</h1>
          <!--    <template>-->
          <el-table
                  :data="tableData"
                  border
                  style="width: 100%">
              <el-table-column
                      fixed
                      prop="date"
                      label="日期"
                      width="150">
              </el-table-column>
              <el-table-column
                      prop="name"
                      label="姓名"
                      width="120">
              </el-table-column>
              <el-table-column
                      prop="province"
                      label="省份"
                      width="120">
              </el-table-column>
              <el-table-column
                      prop="city"
                      label="市區"
                      width="120">
              </el-table-column>
              <el-table-column
                      prop="address"
                      label="地址"
                      width="300">
              </el-table-column>
              <el-table-column
                      prop="zip"
                      label="郵編"
                      width="120">
              </el-table-column>
              <el-table-column
                      fixed="right"
                      label="操作"
                      width="100">
                  <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                      <el-button type="text" size="small">編輯</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <!--    </template>-->
      </div>
      <!-- 開發環境版本,包含了有幫助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!-- 引入組件庫 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script type="text/javascript">
          var app = new Vue({
              el: '#app',
              data: {
                  message: 'Hello Vue!',
                  tableData: [{
                      date: '2016-05-02',
                      name: '王小虎',
                      province: '上海',
                      city: '普陀區',
                      address: '上海市普陀區金沙江路 1518 弄',
                      zip: 200333
                  }, {
                      date: '2016-05-04',
                      name: '王小虎',
                      province: '上海',
                      city: '普陀區',
                      address: '上海市普陀區金沙江路 1517 弄',
                      zip: 200333
                  }, {
                      date: '2016-05-01',
                      name: '王小虎',
                      province: '上海',
                      city: '普陀區',
                      address: '上海市普陀區金沙江路 1519 弄',
                      zip: 200333
                  }, {
                      date: '2016-05-03',
                      name: '王小虎',
                      province: '上海',
                      city: '普陀區',
                      address: '上海市普陀區金沙江路 1516 弄',
                      zip: 200333
                  }]
              }
          });
      </script>
      </body>
      </html>

      效果

      在這里插入圖片描述

      總結

      去https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html網站把源碼拷貝進去運行
      如何運行
      拷貝進去ctrl+s保存,點擊右面小窗口的刷新就可以
      element-ui
      https://element.eleme.cn/#/zh-CN/component/table
      組件很多,想用的照著上面那個表格照葫蘆畫瓢用就行了

      到此這篇關于一分鐘帶你體驗html+vue+element-ui的絲滑的文章就介紹到這了,更多相關html vue element-ui內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      相關文章

      • html直接引用vue和element-ui的方法

        這篇文章主要介紹了html直接引用vue和element-ui的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
        2020-09-02

      最新評論

      218彩票 www.yurindex.com:西城区| www.toptuto.com:霞浦县| www.sz-jinxuan.com:遂川县| www.tente-igloo-gonflable.com:准格尔旗| www.yumaoziyuan.com:富平县| www.limonychelo.com:武强县| www.zhukao001.com:乐山市| www.pyweitong.com:保德县| www.fsbaohu.com:玉林市| www.seocontest2008.com:灌南县| www.geeks-corner.com:隆子县| www.wwwr26006.com:苏尼特右旗| www.jam-bg.com:湖北省| www.thisisbookshelf.com:中江县| www.uflytech.com:辛集市| www.hlswclub.com:彩票| www.1288ddz.com:平定县| www.sixsecondad.com:徐水县| www.523962.com:宁夏| www.qideyan.com:达州市| www.200v200.com:上思县| www.myfitdays.com:仁怀市| www.x1900.com:荥阳市| www.m2992.com:黄山市| www.niaz711.com:缙云县| www.frederickpress.net:襄樊市| www.www834suncity.com:祁门县| www.giteaux5lucarnes.com:南京市| www.awesome-book.com:富平县| www.gaindealsnow.com:丰顺县| www.avexi.cn:仙游县| www.messinginaction.com:阜城县| www.vcmarienkirchen.com:竹山县| www.thebookswisschocolate.com:故城县| www.bihaiwanhg.com:浦东新区| www.bin-heart.com:宁陕县| www.springersjourney.com:永修县| www.maritimelawyer-china.com:河东区| www.r7678.com:大关县| www.hg85345.com:新竹市| www.hnprn.cn:定襄县| www.bogree.com:定边县| www.ccwomen.org:曲靖市| www.solarisband.com:武强县| www.sjzhshq.com:深圳市| www.fromge.com:安新县| www.xzjwgczw.com:慈利县| www.whatschimp.com:顺平县| www.thilllaw.com:鹤壁市| www.uidongmun.com:潞城市| www.repingou.com:江津市| www.iberobox.com:齐齐哈尔市| www.kjyzw.cn:澜沧| www.carouselshow.com:玉山县| www.aiweizhi.com:姚安县| www.v8f4.com:盱眙县| www.hina-ef.com:紫云| www.anapanasatiyoga.net:沈丘县| www.raycorodriguez.com:湟源县| www.fo-sante.com:海盐县| www.yqlfanli.com:茌平县| www.jp733.com:错那县| www.trading-index.com:巴楚县| www.messagefacts.org:正宁县| www.pboworks.com:昭觉县| www.practicalitstrategy.com:湄潭县| www.5566zy.com:开封县| www.ourmanufacturers.com:蓝山县| www.everyounggroup.com:开阳县| www.sunmastering.com:凤翔县| www.999yingcheng.com:澄江县| www.0898sport.com:柳江县| www.zhibo6789.com:南城县| www.electricmassagechair.org:武穴市| www.foodboxmenu.com:吴忠市| www.bhwwz.com:平潭县| www.myphotoestate.com:会宁县| www.blackpigfestivalenniscrone.com:贵州省| www.xadeco.com:长汀县| www.rudrayogacentre.com:通渭县| www.fengfa-china.com:石林| www.eschervictoria.com:泽州县| www.kzftp.com:曲靖市| www.martingayford.com:宣威市|