一分钟带你体验html+vue+element-ui的丝滑

建站知识 2021-07-02 22:42www.168986.cn长沙网站建设

技术迷

html 网页，你指定知道
vue 尤尤开发的前端框架
element 外卖团队的前端ui

在你的网页的<title>标签下添加

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg./element-ui/lib/theme-chalk/index.css">

引入js

在html狼蚁网站SEO优化，<body>里加入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr./npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg./element-ui/lib/index.js"></script>

文件源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg./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="日期"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="120">
        </el-table-column>
        <el-table-column
                prop="city"
                label="市区"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="300">
        </el-table-column>
        <el-table-column
                prop="zip"
                label="邮编"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--    </template>-->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr./npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg./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: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }]
        }
    });
</script>
</body>
</html>

效果

去https://codesandbox.io/s/passionate-rgb-kmcyx?file=/index.html网站把源码拷贝进去运行
如何运行
拷贝进去ctrl+s保存，点击右面小窗口的刷新就可以
element-ui
https://element.eleme./#/zh-CN/ponent/table
组件很多，想用的照着上面那个表格照葫芦画瓢用就行了

到此这篇关于一分钟带你体验html+vue+element-ui的丝滑的文章就介绍到这了,更多相关html vue element-ui内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：在HTML中限制input 输入框只能输入纯数字的实现下一篇：html转pdf截图保存功能的实现

一分钟带你体验html+vue+element-ui的丝滑

技术迷

引入js

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

一分钟带你体验html+vue+element-ui的丝滑

技术迷

引入js

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设