无码狠狠躁久久久久久久,国产成a人片777777久久,一区二区三区无码免费

技術(shù)迷

html 網(wǎng)頁(yè)，你指定知道
vue 尤尤開(kāi)發(fā)的前端框架
element 外賣團(tuán)隊(duì)的前端ui

在你的網(wǎng)頁(yè)的<title>標(biāo)簽下添加

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

引入js

在html下面，<body>里加入

<!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入組件庫(kù) -->
<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>
<!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入組件庫(kù) -->
<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)站把源碼拷貝進(jìn)去運(yùn)行
如何運(yùn)行
拷貝進(jìn)去ctrl+s保存，點(diǎn)擊右面小窗口的刷新就可以
element-ui
https://element.eleme.cn/#/zh-CN/component/table
組件很多，想用的照著上面那個(gè)表格照葫蘆畫(huà)瓢用就行了

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

標(biāo)簽：內(nèi)蒙古廣安上海陜西山南吳忠清遠(yuǎn) 保定

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《一分鐘帶你體驗(yàn)html+vue+element-ui的絲滑》，本文關(guān)鍵詞一分鐘,帶你,體驗(yàn),html+vue+element-ui,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。