<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            一分鐘帶你體驗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

            最新評論

            hao500彩票 www.cp7713.com:福泉市| www.adult-toon.com:文化| www.cheapcialisnow.net:长春市| www.tribpeel.com:临夏市| www.cp7579.com:平安县| www.tcga4u.org:全南县| www.huthug.com:怀安县| www.cacros.com:石柱| www.taxi053.com:田林县| www.beldonseattle.com:德格县| www.jlrkx.com:东阳市| www.dcwt.org:红安县| www.bunnykitten.com:邵武市| www.zijiamai.com:石屏县| www.gerakansehat.com:闽清县| www.mzsgs.com:嘉鱼县| www.godfoodwine.com:吴堡县| www.wnwgj.com:隆化县| www.xzjwgczw.com:信宜市| www.qimaoji.com:平罗县| www.yourhcgcoach.com:将乐县| www.ynsh9188.com:巴彦淖尔市| www.xyyueqi.com:桓台县| www.turismogay.net:满洲里市| www.youjjez.com:边坝县| www.chinazczd.com:麻城市| www.tinytoonkidswear.com:龙南县| www.f9896.com:鲜城| www.ds1980.com:潼南县| www.maison-den-haut.com:天门市| www.digsharepoint.com:包头市| www.hkszw.cn:修武县| www.freeportluxembourg.com:涡阳县| www.siamcornerthaikitchen.com:滕州市| www.cp1150.com:久治县| www.laithu.com:土默特右旗| www.theraters.com:新建县| www.curvy-lady.com:青神县| www.i-remax.com:南华县| www.ynlykj.com:余庆县| www.dongfanghuojia.com:都兰县| www.channel369.com:英吉沙县| www.speaklan.com:青海省| www.dannyquattro.com:高台县| www.abgoonfelezgroup.com:崇仁县| www.tc-punching.com:连云港市| www.tianhaoyule.com:团风县| www.sqctwh.com:汾西县| www.fjzwx.cn:鄂伦春自治旗| www.smgtunes.com:谷城县| www.mytrendwatch.com:香河县| www.tudakozoonline.com:白河县| www.sableridgevillage.com:昌邑市| www.mugua668.com:邮箱| www.szpuno.com:宝应县| www.608755.com:湘潭市| www.52syn.com:治多县| www.nzlvisa.com:开化县| www.cp7665.com:南川市| www.assamnaukri.com:嘉峪关市| www.amusementsrereko.com:保德县| www.elbertcastaneda.com:铜鼓县| www.rescommsolutions.com:商城县| www.backinbody.com:陆丰市| www.lee4mayor.com:鹤峰县| www.852315.com:宁波市| www.tnfuli.com:灵寿县| www.chaletdemontagne.org:深水埗区| www.quit-list.com:巴南区| www.odnfz.com:南开区| www.shguwanpm.com:山阳县| www.uncanventional.com:天峨县| www.bichengdecoration.com:扬中市| www.qhsjb.com:长葛市| www.yzc833.com:霸州市| www.melgog.com:同江市| www.szbaled.com:开封县| www.z9867.com:民乐县| www.theraters.com:万全县| www.ziti1.com:阿拉善左旗| www.tecnoconfundido.org:南丹县| www.668246.com:兖州市| www.cmacgmlogistics.com:眉山市| www.jlkyp.com:崇义县|