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

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)

Recommend

Solution to the problem of installing MySQL compressed version zip

There was a problem when installing the compresse...

XHTML no longer uses some obsolete elements in HTML

When we do CSS web page layout, we all know that i...

Detailed explanation of MySQL master-slave replication and read-write separation

Table of contents Preface 1. Overview 2. Read-wri...

Introduction to CSS style classification (basic knowledge)

Classification of CSS styles 1. Internal style --...

Understand the basics of Navicat for MySQL in one article

Table of contents 1. Database Operation 2. Data T...

WeChat applet to obtain mobile phone number step record

Preface Recently, I encountered such a problem wh...

Detailed explanation of the use of grid properties in CSS

Grid layout Attributes added to the parent elemen...

Teach you how to build Tencent Cloud Server (graphic tutorial)

This article was originally written by blogger We...

Nodejs-cluster module knowledge points summary and example usage

The interviewer will sometimes ask you, tell me h...

Record of the actual process of packaging and deployment of Vue project

Table of contents Preface 1. Preparation - Server...

MySQL transaction, isolation level and lock usage example analysis

This article uses examples to describe MySQL tran...

An Uncommon Error and Solution for SQL Server Full Backup

1. Error details Once when manually performing a ...

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

A permanent solution to MYSQL's inability to recognize Chinese

In most cases, MySQL does not support Chinese whe...

Implementation of Vue single file component

I recently read about vue. I found a single-file ...