<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.dghrx.com:榆社县| www.expressmasti.com:堆龙德庆县| www.e-andac.com:蕲春县| www.omymedia.com:浦江县| www.gwmak.com:武宣县| www.82588k.com:西乌珠穆沁旗| www.shfyhg.com:佛学| www.zfhsw.cn:池州市| www.gw336.com:大方县| www.lclxh.com:赣州市| www.kinostream.net:通州区| www.gotbadgeapp.com:南宁市| www.fifth-wheels.com:东乡县| www.shuidajie.com:阿坝县| www.kq266.com:前郭尔| www.bumibuana.com:大姚县| www.chinaaluminumcircle.com:庆云县| www.teknikellermakina.com:遵义市| www.445cf.com:夏津县| www.fuzhuang1717.com:登封市| www.yuanquanfeiye.com:贵阳市| www.g6552.com:苍南县| www.jd2002.net:阜阳市| www.847602.com:彭州市| www.biosourcepharm.com:仲巴县| www.pazarlamaturkiye.net:馆陶县| www.8ckc.com:乐业县| www.bunkiecityhall.com:河池市| www.bdshe88.com:松原市| www.chimuwaza.com:西城区| www.baikalwaves.com:佛冈县| www.tc-punching.com:依安县| www.zhiweifurniture.com:永寿县| www.cmagermany.com:北流市| www.k6558.com:宝鸡市| www.mgxsp.com:定兴县| www.beyond-destiny.com:上犹县| www.km-alliance.com:龙口市| www.cp7665.com:叙永县| www.mueryoubabing.com:伽师县| www.gzdecen.com:游戏| www.49website.com:达日县| www.carecnn.com:乐山市| www.menkeji.com:老河口市| www.homakimiblog.com:洛南县| www.addx-technologies.com:鲜城| www.amnestyforanimals.org:陇西县| www.lucastenor.com:疏勒县| www.taki100.net:通许县| www.procarpetcleaningservices.com:虞城县| www.njkzx.org:呼图壁县| www.lts-portal.org:汤阴县| www.insect-museum.com:庆阳市| www.catdossettboudoir.com:云梦县| www.kmtyaf.com:大英县| www.fionarr.com:巫山县| www.926251.com:仲巴县| www.yr597.com:台东市| www.showbar8.com:黔西| www.directequipement.net:清徐县| www.curso-endodoncia.com:湖北省| www.all-best-slots.com:陆良县| www.noseutube.com:马龙县| www.kpzhw.cn:民丰县| www.ssxnshz.com:伊吾县| www.chungcuhanoimoi.net:高清| www.consumsostenible.com:尼勒克县| www.a-silver.com:松潘县| www.goibm.com:始兴县| www.modbus-ida.com:东源县| www.aumetrodeslilas.com:金寨县| www.pchelpdoc.com:托克逊县| www.sf123cq.com:武宁县| www.businessptr.com:区。| www.szjrgb.com:博野县| www.whxblaw.com:盐边县| www.ujaxu.com:锦屏县| www.zj-888.com:库车县| www.pure-gen.com:顺平县| www.cp3320.com:孙吴县| www.lsyqsm.com:蒙阴县| www.r3989.com:汤阴县| www.zezenetwork.com:泸定县| www.cp2959.com:阳新县|