テクノロジー・ジャンキー
-
htmlのウェブページは、あなたが知っていることを指定します。
-
vue YoYo開発のためのフロントエンドフレームワーク
-
element テイクアウトチームのフロントエンドUI
あなたのページの
</code>tag under the
</p><div><pre>
<code><! --Introduce styles -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</code>
</pre></div><h3>Introduce js
</h3><p>in
<code>html
</code>Below the
<code><body>
</code>Add
</p><div><pre>
<code><! -- Development environment version with helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<! --Introducing component libraries -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</code>
</pre></div><p>File source code
</p><div><pre>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<! --Introduce styles -->
<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="date"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="name"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="province"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="downtown"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="address"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="zip"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="operation"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"> view </el-button>
<el-button type="text" size="small">edit</el-button>
</template>
</el-table-column>
</el-table>
<! -- </template> -->
</div>
<! -- Development environment version with helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<! --Introducing component libraries -->
<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: 'Wang Xiaohu',
province: 'Shanghai',
city: 'Putuo District',
address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: 'Shanghai',
city: 'Putuo District',
address: '1517 Lane, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: 'Shanghai',
city: 'Putuo District',
address: '1519 Lane, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: 'Shanghai',
city: 'Putuo District',
address: '1516 Lane, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}]
}
});
</script>
</body>
</html>
</code>
</pre></div><p>Effect
</p><p><img></img></p><h3>Summary
</h3><p>Go to https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html网站把源码拷贝进去运行
<br></br><strong>How to run
</strong><br></br>
Copy in
<code>ctrl+s
</code>Save it, and click Refresh in the small window on the right to
<br></br><strong>element-ui
</strong><br></br>
https://element.eleme.cn/#/zh-CN/component</table><br></br>
There are a lot of components, so if you want to use them, follow the table above
<code>draw a diagram from a gourd
</code>Just use
</p><p>This article about the silky smooth experience of html+vue+element-ui in one minute is all about this, more related html vue element-ui content please search the previous articles of the Codedevlib or continue to browse the following related articles, hope you will support the Codedevlib more in the future!
</p><div><div></div></div>
