Vue日常使用与常见问题
使用:
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 ...
随机推荐
- 中文关键字检索分析-导出到csv或者excel-多文件或文件夹-使用python和asyncio和pandas的dataframe
1.02版本 把原来的tab一个个拼接成文件输出,改成pandas的dataframe 使用asyncio库来使用协程,但是测试下来速度好像是差不多的.可能速度太快了,没能很好的测出来差异. 原来的最 ...
- sql 查询表数据
SELECT s.Name AS SchemaName, t.Name AS TableName, p.rows AS RowCounts--, --CAST(ROUND((SUM(a.used_pa ...
- 系统编程-进程-探究父子进程的数据区、堆、栈空间/ 当带缓存的C库函数遇上fork
1. test1 #include <stdio.h> #include <unistd.h> #include <stdlib.h> /******全局变量位于数 ...
- java基础 -网络编程笔记
666,InetAddress package com.hspedu.api; import java.net.InetAddress; import java.net.UnknownHostExce ...
- [OI] 数学与推论证明 3（高中数学篇）
1 \[\color{#40865d}(2) \] \(f(x)=x^{2}-a(x+a\ln x)(a\neq0)\),若 \(f(1)+f'(1)=0\) 且 \(a\gt 0\),问可以得到什么 ...
- Linux：/proc/meminfo参数详细解释
Linux:/proc/meminfo参数详细解释 一.Linux内存总览图 二.meminfo参数的详细介绍 /proc/meminfo是了解Linux系统内存使用状况的主要接口,我们最常用的&qu ...
- 24. echarts 可以画哪些图表
1. 折线图 2. 柱状图 3. 饼图 4. 地图 5. 雷达图 延申问题:画折线图和柱状图哪些配置可以改变样式 1. color 设置每个数据的颜色 2. grid 网格设置图表的大小 3. s ...
- CSP-J2/S2 2023 游记
可能早就应该发出来的游记. 2023-10-07 16:32. 前一天睡得比较晚,所以迟到了一点点. 上来先敲了个对拍,拍了一个 if a % 1000 = 0 then a++ 的 A + B,拍出 ...
- KubeSphere 接入外部 Elasticsearch 最佳实践
作者:张坚,科大讯飞开发工程师,云原生爱好者. 大家好,我是张坚.今天来聊聊如何在 KubeSphere 中集成外置的 ES 组件. KubeSphere 在安装完成时候可以启用日志组件,这样会安装 ...
- Java 线程池获取池中所有线程列表的方法
在Java中,获取线程池中所有线程列表并不是一个直接支持的功能,因为线程池的设计通常是为了隐藏和管理底层的线程细节,从而提供更高层次的抽象和并发控制能力.然而,通过一些反射和技巧,我们仍然可以获取到线 ...