站长资源网页制作
一分钟带你体验html+vue+element-ui的丝滑
简介技术迷html 网页，你指定知道vue 尤尤开发的前端框架element 外卖团队的前端ui在你的网页的标签下添加<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chal</div>
<div class="news_infos"><div id="MyContent"><h3>技术迷</h3>
<ul>
<li>html 网页，你指定知道</li>
<li>vue 尤尤开发的前端框架</li>
<li>element 外卖团队的前端ui</li>
</ul>
<p>在你的网页的<code><title></code>标签下添加</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></pre>
</div>
<h3>引入js</h3>
<p>在<code>html</code>下面，<code><body></code>里加入</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script></pre>
</div>
<p>文件源码</p>
<div class="htmlcode">
<pre class="brush:js;">
<!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></pre>
</div>
<p>效果</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-03-30/2020122215342875.png');"><img src="/UploadFiles/2021-03-30/2020122215342875.png" alt="一分钟带你体验html+vue+element-ui的丝滑" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<h3>总结</h3>
<p>去https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html网站把源码拷贝进去运行<br>
<strong>如何运行</strong><br>
拷贝进去<code>ctrl+s</code>保存，点击右面小窗口的刷新就可以<br>
<strong>element-ui</strong><br>
https://element.eleme.cn/#/zh-CN/component/table<br>
组件很多，想用的照着上面那个表格<code>照葫芦画瓢</code>用就行了</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="http://m.paidiu.com/show/1/67166.html" title="在HTML中限制input 输入框只能输入纯数字的实现">在HTML中限制input 输入框只能输入纯数字的实现</a></p>
<p>下一篇：<a href="http://m.paidiu.com/show/1/67168.html" title="html转pdf截图保存功能的实现">html转pdf截图保存功能的实现</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/show/1/615817.html" title="李国祥.1995-九五变奏【嘉音】【WAV+CUE】">李国祥.1995-九五变奏【嘉音】【WAV+CUE】</a></li>
<li><a href="/show/1/615816.html" title="许景淳.1992-你来自何方【全美唱片】【WA">许景淳.1992-你来自何方【全美唱片】【WA</a></li>
<li><a href="/show/1/615815.html" title="石欣卉.2007-剧欣卉集·完整电视剧主题精丫">石欣卉.2007-剧欣卉集·完整电视剧主题精丫</a></li>
<li><a href="/show/1/615814.html" title="群星.2005-LOVE情歌集VOL.5.2CD【正东】【">群星.2005-LOVE情歌集VOL.5.2CD【正东】【</a></li>
<li><a href="/show/1/615813.html" title="孙悦.1996-伙伴【正大国际】【ＷAV+CUE】">孙悦.1996-伙伴【正大国际】【ＷAV+CUE】</a></li>
<li><a href="/show/1/615812.html" title="纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐">纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐</a></li>
<li><a href="/show/1/615811.html" title="证声音乐图书馆《走向自然 疗心爵士乐》[">证声音乐图书馆《走向自然 疗心爵士乐》[</a></li>
<li><a href="/show/1/615810.html" title="证声音乐图书馆《走向自然 疗心爵士乐》[">证声音乐图书馆《走向自然 疗心爵士乐》[</a></li>
<li><a href="/show/1/615809.html" title="陈慧娴.2018-Priscilla-Ism演唱会3CD（202">陈慧娴.2018-Priscilla-Ism演唱会3CD（202</a></li>
<li><a href="/show/1/615808.html" title="郑秀文.1999-我应该得到（国）【华纳】【WA">郑秀文.1999-我应该得到（国）【华纳】【WA</a></li>
</ul>
</div>
</div>
<div class="sidebar">
<div class="cloud"><h2 class="hometitle">一句话新闻</h2><a href="/show/1/603537.html"><ul>Windows上运行安卓你用过了吗<br><br>在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。</ul></a></div>
</div>
</article>
<footer>
<p style="font-size: 14px;">友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="http://www.ddrfans.com/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap.xml">SiteMap</a></p>
<p>Design by <a href="http://m.paidiu.com">黑松山资源网</a> <a href="/">http://m.paidiu.com</a></p>
</footer>
<script src="/images/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>