使用:

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 – 数据类型

    前言 写着 TypeScript 学习笔记, 顺便也写点 JS 的呗. 参考 JS数据类型分类和判断 阮一峰 – 数据类型 JS 数据类型 string number boolan undefined ...

  2. Naming Conversion & Case Style 命名规范

    前言 写代码有 2 个点很重要 第一是表达 (不要词不达意) 要达到这点, 就要多参考其它人如何表达. 第二是一致性 (一样的东西就用一样的写法) 要达到这点就要建立规范 以前的笔记 命名规范 nam ...

  3. 邀请参与 2022 第三季度 Flutter 开发者调查

    自 Flutter 3 发布之后,我们在以移动端为中心到多平台框架的路线上稳步前行,用 Dart 2.17 的新语言特性帮助大家提升工作效率,并对核心工具进行了改进,让您在跨平台打造优秀体验时更加得心 ...

  4. SimpleAIAgent：使用免费的glm-4-flash即可开始构建简单的AI Agent应用

    SimpleAIAgent是基于C# Semantic Kernel 与 WPF构建的一款AI Agent探索应用.主要用于使用国产大语言模型或开源大语言模型构建AI Agent应用的探索学习,希望能 ...

  5. 【赵渝强老师】使用Oracle的跟踪文件

    一.什么是跟踪文件? 跟踪文件中包含了大量而详细的诊断和调试信息.通过对跟踪文件的解读和分析,我们可以定位问题.分析问题和解决问题.从跟踪文件的产生的来源来看,跟踪文件又可以分为两类:一类是数据库的操 ...

  6. Linux软中断ksoftirqd

    前言 在上一篇 LINUX软中断-softirq的描述中,提到过ksoftirqd,这篇文章就介绍ksoftirqd ksoftirqd 是什么? ksoftirqd 是个内核线程,在创建的时候是绑定 ...

  7. python安装pandas+pytz

    如下图所示,在安装pandas的过程中,发现他还要安装pytz这个包.我不想等他自己下载,因为很容易出错,所以我就先下载了pytz这个包,然后安装完毕,再去安装pandas这个包. 首先呢先登录这个网 ...

  8. yarn serve 不能开启vue项目 the project seem to require yarn but isnot install

    error: answer: 删除 yarn.lock 或者使用 npm run serve 替换 ; ps: yarn.lock 是锁定第三方包版本的文件:

  9. webpack中 ，有哪些常见的Loader？他们是解决什么问题的？

    1. css-loader 翻译css ,可以把sass / less 代码翻译成 css 代码 : 2. imgage-loader 加载并压缩图片文件 3. source-map-loader 加 ...

  10. centos7.9 安装 nodejs（包含安装fnm、更换yum源、升级 gcc、make、glibc、libstdc++）

    1.安装fnm (1)压缩包fnm-linux.zip搞到服务器上,我放在root里. (2)解压.设置权限 unzip fnm-linux.zip chmod 777 fnm (3)设置环境变量,添 ...