使用:

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. 熔断、限流、降级 —— SpringCloud Hystrix

    概述 Hystrix 为 微服务架构提供了一整套服务隔离.服务熔断和服务降级的解决方案.它是熔断器的一种实现,主要用于解决微服务架构的高可用及服务雪崩等问题 Hystrix 的特性如下: 服务熔断:H ...

  2. 为什么Java已经不推荐使用Stack了？

    为什么不推荐使用Stack Java已不推荐使用Stack,而是推荐使用更高效的ArrayDeque 为什么不推荐使用 性能低:是因为 Stack 继承自 Vector, 而 Vector 在每个方法 ...

  3. 知识点考古：php5的面向对象学习笔记

    闲来无事翻看以前收藏的资料,考古到保存的这篇文章对php的OOP的整理还很系统.原链接已经打不开(http://www.cublog.cn/u/17686/showart.php?id=146562) ...

  4. Soring —— 容器总结

    获取bean    容器层次结构图      *BeanFactory 是IoC容器的顶层接口,初始化BeanFactory对象时,加载的bean延迟加载 bean相关    依赖注入相关   

  5. 【YashanDB知识库】如何dump数据文件，转换rowid， 查询对应内容

    本文来自YashanDB官网,具体内容可见https://www.yashandb.com/newsinfo/7459464.html?templateId=1718516 问题现象 客户环境有时候会 ...

  6. kotlin更多语言结构——>空安全

    可空类型与非空类型 Kotlin 的类型系统旨在从我们的代码中消除 NullPointerException .NPE 的唯一可能的原因可能是: -  显式调用 throw NullPointerEx ...

  7. spring cloud openfeign 源码

    一.读取注解信息 入口 1 import org.springframework.boot.SpringApplication; 2 import org.springframework.boot.a ...

  8. KubeKey v3.1 发布：快速自定义离线安装包

    日前,KubeKey v3.1 正式发布.该版本主要对离线场景部署.离线包制作以及向 Kubernetes v1.24+ 升级进行了优化. KubeKey 简介 KubeKey 是 KubeSpher ...

  9. OpenFunction 应用系列之一: 以 Serverless 的方式实现 Kubernetes 日志告警

    概述 当我们将容器的日志收集到消息服务器之后,我们该如何处理这些日志?部署一个专用的日志处理工作负载可能会耗费多余的成本,而当日志体量骤增.骤降时亦难以评估日志处理工作负载的待机数量.本文提供了一种基 ...

  10. Nuxt.js 应用中的 builder：generateApp 事件钩子详解

    title: Nuxt.js 应用中的 builder:generateApp 事件钩子详解 date: 2024/10/23 updated: 2024/10/23 author: cmdragon ...