tech-head
- HTML web page, you know
- Front end framework of Vue youyou development
- Front end UI of element takeout team
In the<title>Add under label
<! -- introduce style -- >
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">Introduce JS
stayhtmlbelow,<body>Join in
<! -- development environment version, including helpful command line warnings -- >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<! -- import component library -- >
<script src="https://unpkg.com/element-ui/lib/index.js"></script>File source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<! -- introduce style -- >
<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 = "urban area"
width="120">
</el-table-column>
<el-table-column
prop="address"
Label = "address"
width="300">
</el-table-column>
<el-table-column
prop="zip"
Label = "postcode"
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, including helpful command line warnings -- >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<! -- import component library -- >
<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: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}, {
date: '2016-05-04',
Name: 'Wang Xiaohu',
Province: 'Shanghai',
City: 'Putuo District',
Address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}, {
date: '2016-05-01',
Name: 'Wang Xiaohu',
Province: 'Shanghai',
City: 'Putuo District',
Address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}, {
date: '2016-05-03',
Name: 'Wang Xiaohu',
Province: 'Shanghai',
City: 'Putuo District',
Address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai',
zip: 200333
}]
}
});
</script>
</body>
</html>effect
summary
go https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html The website copies the source code to run
How does it work
copy in ctrl+sSave and click refresh in the small window on the right
element-ui
https://element.eleme.cn/#/zh-CN/component/table
There are many components. Please follow the table abovePicture gourd and ladleJust use it
Here is the article about one minute to take you to experience the silkiness of HTML + Vue + element UI. For more related HTML Vue element UI content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!