欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一分鐘帶你體驗html+vue+element-ui的絲滑

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

技術(shù)迷

  • html 網(wǎng)頁，你指定知道
  • vue 尤尤開發(fā)的前端框架
  • element 外賣團隊的前端ui

在你的網(wǎng)頁的<title>標簽下添加

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

引入js

在html下面，<body>里加入

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<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="市區(qū)"
                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>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<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: '普陀區(qū)',
                address: '上海市普陀區(qū)金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀區(qū)',
                address: '上海市普陀區(qū)金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀區(qū)',
                address: '上海市普陀區(qū)金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀區(qū)',
                address: '上海市普陀區(qū)金沙江路 1516 弄',
                zip: 200333
            }]
        }
    });
</script>
</body>
</html>

效果

在這里插入圖片描述

總結(jié)

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

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

相關(guān)文章

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

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

最新評論