站长资源网页制作
一分钟带你体验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="/3g/1/67166.html" title="在HTML中限制input 输入框只能输入纯数字的实现">在HTML中限制input 输入框只能输入纯数字的实现</a></p>
<p>下一篇：<a href="/3g/1/67168.html" title="html转pdf截图保存功能的实现">html转pdf截图保存功能的实现</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/611777.html" title="张学友《醒着做梦》[DFF][1.1G]">张学友《醒着做梦》[DFF][1.1G]</a></li>
<li><a href="/3g/1/611776.html" title="刘惜君 《如我》[WAV分轨][403M]">刘惜君 《如我》[WAV分轨][403M]</a></li>
<li><a href="/3g/1/611775.html" title="白玛多吉《梦》限量1：1母盘直刻[低速原抓">白玛多吉《梦》限量1：1母盘直刻[低速原抓</a></li>
<li><a href="/3g/1/611774.html" title="魏金栋-金歌新曲-梦里全是桂花香2CD[天凡">魏金栋-金歌新曲-梦里全是桂花香2CD[天凡</a></li>
<li><a href="/3g/1/611773.html" title="鲛岛有美子-樱花赋HQCD[天龙][WAV+CUE]">鲛岛有美子-樱花赋HQCD[天龙][WAV+CUE]</a></li>
<li><a href="/3g/1/611772.html" title="[In-Akustik7506]ReferenceSoundEdition-">[In-Akustik7506]ReferenceSoundEdition-</a></li>
<li><a href="/3g/1/611771.html" title="日本EMI超级名盘TOGE-11035-36BeethovenF">日本EMI超级名盘TOGE-11035-36BeethovenF</a></li>
<li><a href="/3g/1/611770.html" title="宝丽金50周年2010《古典篇》3CD限定盘[低">宝丽金50周年2010《古典篇》3CD限定盘[低</a></li>
<li><a href="/3g/1/611769.html" title="华纳群星.1992-永远新一天华纳15周年金钻">华纳群星.1992-永远新一天华纳15周年金钻</a></li>
<li><a href="/3g/1/611768.html" title="原声《功夫熊猫4 OST》[FLAC][545M]">原声《功夫熊猫4 OST》[FLAC][545M]</a></li>
</ul>
</div>
</div>
<div class="sidebar">
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="/">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/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>