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

How to install nginx on win10

Because the company asked me to build a WebServic...

HTML validate HTML validation

HTML validate refers to HTML validation. It is the...

Implementation method of Nginx+tomcat load balancing cluster

The experimental environment is as follows Here y...

mysql root user cannot be authorized and solve the problem of navicat remote authorization prompt 1044

Look at the solution first #------------The probl...

A complete list of commonly used MySQL functions (classified and summarized)

1. Mathematical Functions ABS(x) returns the abso...

Vue realizes adding watermark to uploaded pictures (upgraded version)

The vue project implements an upgraded version of...

Exploration and correction of the weird behavior of parseInt() in js

Background: I wonder if you have noticed that if ...

MySQL 8.0.13 manual installation tutorial

This article shares the manual installation tutor...

Apache Flink arbitrary Jar package upload leads to remote code execution vulnerability recurrence problem (vulnerability warning)

Vulnerability Description Apache Flink is an open...

Collection of 12 practical web online tools

1. Favicon.cc To create ico icon websites online,...

How to implement scheduled backup of MySQL database

1. Create a shell script vim backupdb.sh Create t...

How to set background color and transparency in Vue

Background color and transparency settings As sho...

Detailed description of the function of new in JS

Table of contents 1. Example 2. Create 100 soldie...

Detailed steps for building Portainer visual interface with Docker

In order to solve the problem mentioned last time...

Incomplete solution for using input type=text value=str

I encountered a very strange problem today. Look a...