使用:

1.在使用elementUI自定义表格中字段样式

官方文档:https://element.eleme.cn/2.10/#/zh-CN/component/table

# 基础使用

 <template>

    <el-table

      :data="tableData"

      style="width: 100%">

      <el-table-column

        prop="date"

        label="日期"

        width="180">

      </el-table-column>

      <el-table-column

        prop="name"

        label="姓名"

        width="180">

      </el-table-column>

      <el-table-column

        prop="address"

        label="地址">

      </el-table-column>

    </el-table>

  </template>

# 想要在添加自定义样式,需要再字段添加样式

<el-table-column property="val" label="值" align="center" class="red">

          <template slot-scope="{ row }">

             <span :class="row.val > 0 ? 'red' : 'green'">{{ row.val }}</span>

          </template>

</el-table-column>

2. vue3+elementui 使用cdn方式打造单页面表格内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 引入Vue3 -->

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- 引入element-plus样式文件 -->

    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />

    <!-- 引入element-plus组件库 -->

    <script src="https://unpkg.com/element-plus"></script>

    <!-- 引入axios -->

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <div id="app">

        <!-- 按钮 -->

        <div>

            <el-button>Default</el-button>

            <el-button type="primary">Primary</el-button>

            <el-button type="success">Success</el-button>

            <el-button type="info">Info</el-button>

            <el-button type="warning">Warning</el-button>

            <el-button type="danger">Danger</el-button>

        </div>

        <!-- 表格 -->

        <div>

            <!-- stripe斑马条纹不起作用，我也不知道为啥 -->

            <el-table border stripe="true" :data="userList" style="width: 100%">

                <!-- 不要忘记末尾标签 </el-table-column>，否则会显示出错-->

                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column type="index" label="" width="50"></el-table-column>

                <el-table-column prop="name" label="姓名" width="180"></el-table-column>

                <el-table-column prop="age" label="年龄" width="180"></el-table-column>

                <el-table-column prop="email" label="邮箱"></el-table-column>

                <el-table-column prop="createTime" label="创建时间"></el-table-column>

                <el-table-column prop="updateTime" label="更改时间"></el-table-column>

            </el-table>

        </div>

    </div>

    <script>

        const { createApp, ref } = Vue;

        createApp({

            setup() {

                const userList = ref([])

                return {

                   userList

                }

            },

            created () {

                this.showUserList()

            },

            methods: {

                showUserList(){

                    //使用axios自定义配置，访问指定地址

                    const request = axios.create({

                        baseURL: 'http://localhost:9000'

                    })

                    request

                        .get('/user/allUsers')

                        .then((response) => {

                            console.log('数据获取成功', response.data)

                            this.userList = response.data

                        })

                        .catch((error) => {

                            console.log('数据获取失败', error)

                        })

                }

            }

            // 全部引入ElementPlus

        }).use(ElementPlus).mount('#app')

    </script>

</body>

</html>

其中涉及,axios的使用中传递参数的支持:

//使用axios自定义配置，访问指定地址

                const request = axios.create({

                    baseURL: 'http://xxx.cn',

                })

                request.get('/getData', {params: {

                        start_date: start_date,

                        end_date: end_date,

                        token,

                    }})

                    .then((response) => {

                        console.log('数据获取成功', response.data)

                        if (response.data.code == 0) {

                            this.dataList = response.data.data

                        } else {

                            ElementPlus.ElMessage.error(response.data.msg)

                        }

                    })

                    .catch((error) => {

                        console.log('数据获取失败', error)

                    })

时间选择器,涉及中文的支持

<script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>

进行配置:

.use(ElementPlus,{

        locale: ElementPlusLocaleZhCn,

    }).mount('#app')

<el-date-picker
        v-model="dt"
        type="daterange"
        unlink-panels
        range-separator="|"
        start-placeholder=""
        end-placeholder=""
        :shortcuts="shortcuts"
        :size="size"
        :default-time="defaultTime"
        class="margin-span"
        style="width:30%"
></el-date-picker>

const defaultTime = ref<[Date, Date]>([
    new Date(),
    new Date(),
])
const dt = ref('')
const shortcuts = [
    {
        text: '近一星期',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
]
# 对于时间参数的处理
let start_date = this.formatDate(new Date());
let end_date = this.formatDate(new Date());
if (this.dt) {
    start_date = this.formatDate(this.dt[0]);
    end_date = this.formatDate(this.dt[1]);
}
// 日期格式化函数(2024-11-25)
formatDate(date){
    var year = date.getFullYear();
    var month = ("0" + (date.getMonth() + 1)).slice(-2);
    var day = ("0" + date.getDate()).slice(-2);

    return year + "-" + month + "-" + day;
}


数据导出

downloadFile(fileName, content){

                let aLink = document.createElement('a');

                let blob = new Blob([content], {type:"text/csv"});

                aLink.download = fileName;

                aLink.href = URL.createObjectURL(blob);

                aLink.click();

            }

// 调用方式, 要求数据是字符串方式,CSV格式(日期,名称\n2024-11-25,lanlang\n)

downloadFile(`数据-${cid}.csv`, response.data.data)

3. 锚点与路由

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 引入Vue3 -->

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- vue-router -->

    <script src="https://unpkg.com/vue-router@4.2.5/dist/vue-router.global.js"></script>

    <!-- 引入element-plus样式文件 -->

    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

    <!-- 引入element-plus组件库 -->

    <script src="https://unpkg.com/element-plus"></script>

    <!-- 引入axios -->

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <div id="app">

        <h1>人物介绍-矫厚根</h1>

        <p>

            <!-- 路由标签 -->

            <router-link to="/jbxx">基本信息</router-link> |

            <router-link to="/zyzp">主要作品</router-link> |

            <router-link to="/rsgy">人生格言</router-link>

        </p>

        <!-- 路由出口 -->

        <router-view></router-view>

    </div>

    <script>

        const { createApp, ref} = Vue

        // 1.初始化组件模板

        const jbxx = {template:'<div>人气男神-矫厚根，79岁，男，唱跳歌手。</div>'}

        const zyzp = {template:'<div>《炒鸡蛋三部曲》，《红烧肉92部曲》，《路灯下偷皮鞋的老奶》。</div>'}

        const rsgy = {template:'<div>我就是我，是不一样的烟火。</div>'}

        // 2.定义路由列表

        const routeList = [

            //path:锚点   component组件信息

            {path:"/jbxx", component:jbxx},

            {path:"/zyzp", component:zyzp},

            {path:"/rsgy", component:rsgy}

        ]

        // 3.创建路由实例

        const router = VueRouter.createRouter({

            // history 模式：hash 模式

            history: VueRouter.createWebHashHistory(),

            // 挂载路由列表

            routes: routeList

        })     

        createApp({

            setup() {

                return {

                }

            }

        })

        // 全部引入ElementPlus

        .use(ElementPlus)

        // 整个应用支持路由

        .use(router)

        .mount('#app')

    </script>

</body>

</html>

常见问题:

　　1) 使用命令 npm  install 安装依赖包的时候,出现错误:

checking for Python executable "python2" in the PATH

　　解决:

使用cnpm 来安装：

具体做法：

安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

安装gulp-sass

语法都是一样的，只是将npm换成cnpm

cnpm install --save-dev gulp-sass

　　

使用npm安装node-sass时, 也出现了该报错

使用dart-sass来替换node-sass

yarn add node-sass@yarn:dart-sass -D

或者

npm install node-sass@npm:dart-sass -D

// 更推荐使用yarn

　　2)使用nginx进行部署的时候， 出现无法使用代理访问后台接口的情况， 需要nginx添加额外配置信息

location /api {

    rewrite ^.+api/?(.*)$ /$1 break;

    include uwsgi_params;

    proxy_pass http://d.xxx.com;

}

　　3)在使用qrcodejs2-fix的时候, 运行会出现错误:TypeError:Cannot read properties of undefined(reading'_android')

解决:

去掉qrcodejs2 插件，引入qrcodejs2-fix

npm i --save qrcodejs2-fix

在页面中使用，引入依赖

import QRCode from 'qrcodejs2-fix'

Vue日常使用与常见问题的更多相关文章

  1. vue项目中的常见问题

    总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...

  2. Vue使用过程中常见问题

    目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...

  3. vue.js开发SPA常见问题及解决方法

    列表进入详情页的传参问题. 例如商品列表页面前往商品详情页面,需要传一个商品id; <router-link :to="{path: 'detail', query: {id: 1}} ...

  4. vue 开发中的常见问题

    (一)eslint静态检查 在大家用vue-cli创建工程的时候,会有一项,使用使用eslint,如果选择了y,那么工程就会安装并启用eslint. 这里列举一下常见的错误: 1.多余的分号 2.定义 ...

  5. vue日常练习一

    <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti ...

  6. vue项目中的常见问题（vue-cli版本3.0.0）

    一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时 在style标签中加入 lang="les ...

  7. vue 移动端/PC常见问题及解决方法

    一.判断手机/PC浏览器语言 navigator.language // 返回语言代码 语言代码文档: http://www.lingoes.cn/zh/translator/langcode.htm ...

  8. 由 Vue 中三个常见问题引发的深度思考

    为什么 data 要写成函数,而不允许写成对象? Vue 中常说的数据劫持到底是什么? Vue 实例中数组改变 length 或下标直接赋值什么不能更新视图? http://www.sohu.com/ ...

  9. vue 日常开发小细节

    1. element-ui 日期选区禁用,设置属性 disabledDate: (time) => { const curDate = (new Date()).getTime() const ...

  10. vue日常问题总结

    1.Vue项目启动后首页URL带的#该怎么去掉? vue-router中默认使用的是hash模式,URL中带有#号,我们可以用如下代码修改成history模式: import Vue from 'vu ...

随机推荐

  1. JavaScript – Function 函数

    参考 阮一峰 – 函数的扩展 基本用法 function fn1(param1, param2 = 'default value') { return 'return value'; } fn1('1 ...

  2. C++ 学习路线图

    基础阶段 学习重点: 基本语法:掌握 C++ 的变量.数据类型(如整型.浮点型.字符型等).运算符.控制流语句(条件判断if-else.循环for.while.do-while等).这是编写 C++ ...

  3. 关于 xfg 的班会

  4. `std::packaged_task`、`std::thread` 和 `std::async` 的区别与联系

    std::packaged_task.std::thread 和 std::async 的区别与联系 std::packaged_task.std::thread 和 std::async 都是 C+ ...

  5. 通过一个题目三种变式讲清楚go接口类型断言

    [第一种]一种类型实现多个接口,各个接口变量调用各自的方法 type Work struct { i int } func (w Work) ShowA() int { return w.i + 10 ...

  6. iOS中MJExtension使用详解

    iOS开发中MVC模式最为常见,M代表模型,字典转成模型数据可以简化很多操作,下面我们说一下具体用法. 1.将字典转换成模型对象,模型中的属性名和responseObject字典中的字段名一致,我们得 ...

  7. 删除 设置 获取 cookies 的第三方包 js-cookies

    // 第三方包 js-cookies 是一个操作cookies的包 import Cookies from 'js-cookie' // Cookies.set(key,value) 存值 // Co ...

  8. Python 潮流周刊#72：Python 3.13.0 最终版已发布！（摘要）

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  9. 题解：P9788 [ROIR 2020 Day2] 区域规划

    题目传送门 洛谷题解 思路 首先我们看下数据范围, \(n <= 3000\) ,范围很小,所以暴力枚举. 于是第一份代码出来了. #include<bits/stdc++.h> u ...

  10. Vulnhub 靶机 THE PLANETS: EARTH

    0x01信息收集 1.1.nmap扫描 IP段扫描,确定靶机地址 平扫描 nmap 192.168.1.0/24 扫描结果(部分) Nmap scan report for earth.local ( ...