Experience the silkiness of HTML + Vue + element UI in one minute

Time:2021-4-6

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!