One minute to experience the smoothness of html+vue+element-ui

Technology Fan

html web page, you must know
vue front-end framework developed by Youyou
Element takeaway team's front-end UI

Add this under the <title> tag of your web page

<!-- Import style -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

Import js

Below html , add in <body>

<!-- Development 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Import 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="zip code"
                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 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: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: 'Wang Xiaohu',
                province: 'Shanghai',
                city: 'Putuo District',
                address: 'No. 1517, Jinshajiang Road, Putuo District, Shanghai',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: 'Wang Xiaohu',
                province: 'Shanghai',
                city: 'Putuo District',
                address: 'No. 1519, Jinshajiang Road, Putuo District, Shanghai',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: 'Wang Xiaohu',
                province: 'Shanghai',
                city: 'Putuo District',
                address: 'No. 1516, Jinshajiang Road, Putuo District, Shanghai',
                zip: 200333
            }]
        }
    });
</script>
</body>
</html>

Effect

insert image description here

Summarize

Go to https://codesandbox.io/s/compassionate-rgb-kmcyx?file=/index.html and copy the source code and run it.
How to run <br /> Copy it and press ctrl+s to save, then click refresh in the small window on the right
element-ui
https://element.eleme.cn/#/zh-CN/component/table
There are many components. If you want to use them, just照葫蘆畫瓢the table above.

This is the end of this article about how to experience the smoothness of html+vue+element-ui in one minute. For more related html vue element-ui content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: About CSS floating and canceling floating

>>: Detailed explanation of the role of overflow:hidden (overflow hiding, clearing floats, solving margin collapse)