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

MySQL 5.7.21 installation and configuration tutorial under Window10

This article records the installation and configu...

MySQL code execution structure example analysis [sequence, branch, loop structure]

This article uses an example to describe the MySQ...

Javascript Basics: Detailed Explanation of Operators and Flow Control

Table of contents 1. Operator 1.1 Arithmetic oper...

Summary of some common methods of JavaScript array

Table of contents 1. How to create an array in Ja...

Detailed steps for installing rockerChat in docker and setting up a chat room

Comprehensive Documentation github address https:...

SQL group by to remove duplicates and sort by other fields

need: Merge identical items of one field and sort...

More Ways to Use Angle Brackets in Bash

Preface In this article, we will continue to expl...

Introducing multiple custom fonts in CSS3

Today I found a problem in HTML. There are many d...

Issues with using Azure Container Registry to store images

Azure Container Registry is a managed, dedicated ...

Front-end AI cutting tips (experience)

AI image cutting needs to be coordinated with PS....

How to change the website accessed by http to https in nginx

Table of contents 1. Background 2. Prerequisites ...

HTML table markup tutorial (30): cell dark border color attribute BORDERCOLORDARK

In cells, dark border colors can be defined indiv...

Navicat cannot create function solution sharing

The first time I wrote a MySQL FUNCTION, I kept g...

Detailed explanation of the idea of ​​MySQL trigger detecting a statement in real time for backup and deletion

Problem description: The user has a requirement t...

JavaScript to implement search data display

This article shares the data display code for Jav...