使用:

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日常使用与常见问题的更多相关文章

vue项目中的常见问题
总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...
Vue使用过程中常见问题
目录一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发二.vue用splice删除多维数组元素导致视图更新失败情况三.vue项目如何部署到php或者java环境的服 ...
vue.js开发SPA常见问题及解决方法
列表进入详情页的传参问题. 例如商品列表页面前往商品详情页面,需要传一个商品id; <router-link :to="{path: 'detail', query: {id: 1}} ...
vue 开发中的常见问题
(一)eslint静态检查在大家用vue-cli创建工程的时候,会有一项,使用使用eslint,如果选择了y,那么工程就会安装并启用eslint. 这里列举一下常见的错误: 1.多余的分号 2.定义 ...
vue日常练习一
<html lang="en"> <head> <meta charset="UTF-8"> <title>Ti ...
vue项目中的常见问题（vue-cli版本3.0.0）
一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader --save-dev 在使用时在style标签中加入 lang="les ...
vue 移动端/PC常见问题及解决方法
一.判断手机/PC浏览器语言 navigator.language // 返回语言代码语言代码文档: http://www.lingoes.cn/zh/translator/langcode.htm ...
由 Vue 中三个常见问题引发的深度思考
为什么 data 要写成函数,而不允许写成对象? Vue 中常说的数据劫持到底是什么? Vue 实例中数组改变 length 或下标直接赋值什么不能更新视图? http://www.sohu.com/ ...
vue 日常开发小细节
1. element-ui 日期选区禁用,设置属性 disabledDate: (time) => { const curDate = (new Date()).getTime() const ...
vue日常问题总结
1.Vue项目启动后首页URL带的#该怎么去掉? vue-router中默认使用的是hash模式,URL中带有#号,我们可以用如下代码修改成history模式: import Vue from 'vu ...

随机推荐

Unity 刚体 AddForce 的几种力类型
今天在实现 2D 横版跳跃的时候,发现使用AddForce添加的力太突兀了,没有逐渐向上的过程,发现AddForce还有ForceMode mode参数以下部分内容摘自Bing Copilot总结 ...
浅谈 C# 中的顶级语句
前言在C# 9版本中引入了一项新特性:顶级语句,这一特性允许在不显式定义 Main 方法的情况下直接编写代码. 传统的写法 namespace TestStatements{ internal ...
Angular 18+ 高级教程 – Component 组件の生命周期钩子 (Lifecycle Hooks)
前言之前在 Component 组件の Angular Component vs Custom Elements 文章中,我们有学习过几个基础的 Lifecycle Hooks. 比如 OnCha ...
DQL—查询操作
一.查询语法 select 字段列表 from 表名列表 where 条件列表 group by 分组列表 having 分组后条件 order by 排序字段 limit 分页限定 (提供一个表来操 ...
Google Aviator Evaluator 使用入门（一）
Aviator Evaluator 使用入门(一) https://www.yuque.com/boyan-avfmj/aviatorscript/tvahat 一.什么是规则引擎定义:规则引擎是一 ...
参与 2023 第二季度官方 Flutter 开发者调查
Flutter 3.10 已经正式发布,每个季度一次的 Flutter 开发者调查也来啦!邀请社区的各位成员们填写: 调研旨在了解你对 Flutter 的满意程度以及对其各个子系统的反馈.你的意见将对 ...
c++面经系列0：开篇-c++岗位面试都会问些什么？
本文是C++岗位面试经验分享系列的开篇,敬请持续关注. 在C++岗位面试中,通常首先进行技术面试,若通过则会进行HR面试.HR面试的内容先暂且略过,未来我们会有机会深入探讨,今天我们主要聚焦于技术面试 ...
高通dump ftrace & kernelshark使用
简介高通 ramdump 可以解析出 ftrace,方便用于追踪快省稳问题. kernelshark 是一个可以查看 trace event 的图形化工具,方便梳理和观察内核微观行为. trac ...
Android ：安卓学习笔记之 Handler机制的简单理解和使用
目录 Handler机制 1.Handler使用的引出 2.背景和定义 3.作用和意义 4.主要参数 5.工作原理及流程 5.1.对应关系 6.深入分析 Handler机制源码 6.1.Handler ...
47.vue-router的钩子函数
钩子函数就是路由导航守卫 : 有 7 个守卫,分为 3 类 : 全局守卫:在全部的组件生效: beforeEach 全局前置守卫 afterEach 全局后置守卫解析守卫组件守卫:在某个组件生效 ...

Vue日常使用与常见问题

checking for Python executable "python2" in the PATH

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

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

随机推荐

热门专题