目录
轮播与Vue四
8.28
两种轮播图简单使用
第一种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.skin{
width: 1280px;
height:720px;
border: 1px solid black;
position: relative;
}
.head{
width: 530px;
height: 180px;
position: absolute;
left: 10px;
bottom: 20px;
}
.head img{
width: 100px;
height: 180px;
margin-left: 5px;
}
.s{
width:1280px ;
height: 720px;
display: none;
}
.head-focus{
/* box-shadow 阴影
transform 偏移量
*/
box-shadow: 0 0 10px #fff;
transform : translateY(-5px);
}
</style>
</head>
<body>
<div class="skin">
<div class="s" style="background-image: url(./img/skin/Ezreal_Splash_Centered_3.jpg);"></div>
<div class="s" style="background-image: url(./img/skin/Ezreal_Splash_Centered_5.jpg);"></div>
<div class="s" style="background-image: url(./img/skin/Ezreal_Splash_Centered_6.jpg);"></div>
<div class="s" style="background-image: url(./img/skin/Ezreal_Splash_Centered_7.jpg);"></div>
<div class="s" style="background-image: url(./img/skin/Ezreal_Splash_Centered_8.jpg);"></div>
<div class="head">
<img src="./img/head/Ezreal_3.jpg" alt="" srcset=""><!--
--><img src="./img/head/Ezreal_5.jpg" alt="" srcset=""><!--
--><img src="./img/head/Ezreal_6.jpg" alt="" srcset=""><!--
--><img src="./img/head/Ezreal_7.jpg" alt="" srcset=""><!--
--><img src="./img/head/Ezreal_8.jpg" alt="" srcset="">
</div>
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$('.s:first-child').show()
//addClass()添加class
$(".head img:first-child").addClass('head-focus')
$('.head img').mouseover(function(){
//siblings()，找同级兄弟姐妹
//点击的节点添加class、其它同级节点移除class
$(this).addClass('head-focus').siblings().removeClass('head-focus')
//获取当前节点的索引：$(this).index()
//siblings('.s') ：找到对应类名为s的兄弟标签，让其隐藏
//fadeIn()，淡入淡出
$('.skin .s:eq('+$(this).index()+')').fadeIn(500).siblings('.s').hide()
//让点击的下标成为轮播变量
i=$(this).index()
})
//i轮播变量
let i=1;
//需要等待2秒才会变化
//计时器,每隔2s自动点击下一张
setInterval(()=>{
$(".head img:eq("+i+")").mouseover()
if(i++ ==4){
i=0
}
},2000)
</script>
</body>
</html>
第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* *{
margin: 0;
padding: 0;
} */
.main{
width: 1610px;
height: 720px;
margin: auto;
}
/* >main下所有的div兄弟 */
.main>div{
width: 80px;
height: 720px;
margin: auto;
float: left;
position: relative;
}
/* 将灰色盒子放置在最右边 */
.main .info {
width: 80px;
height:720px;
background-color: rgba(255, 255, 255,0.2);
position: absolute;
right:0;
}
.main .info .skin-name{
/* 设置p标签的宽度、字体大小与宽度一致，实现字竖排放效果 */
width: 24px;
font-size: 24px;
color: white;
margin: 28px;
}
.main .info .hero-name{
width: 22px;
font-size:22px;
color: #fff;
}
</style>
</head>
<body>
<div class="main">
<div style="width: 1280px;background-image: url(./img/skin/Ezreal_Splash_Centered_3.jpg);">
<div class="info">
<p class="skin-name">冰川勇者</p>
<p class="hero-name">伊泽瑞尔</p>
</div>
</div>
<div style="background-image: url(./img/skin/Ezreal_Splash_Centered_5.jpg);">
<div class="info">
<p class="skin-name">未来战士</p>
<p class="hero-name">伊泽瑞尔</p>
</div>
</div>
<div style="background-image: url(./img/skin/Ezreal_Splash_Centered_6.jpg);">
<div class="info">
<p class="skin-name">暗杀星</p>
<p class="hero-name">伊泽瑞尔</p>
</div>
</div>
<div style="background-image: url(./img/skin/Ezreal_Splash_Centered_7.jpg);">
<div class="info">
<p class="skin-name">光执事</p>
<p class="hero-name">伊泽瑞尔</p>
</div>
</div>
<div style="background-image: url(./img/skin/Ezreal_Splash_Centered_8.jpg);">
<div class="info">
<p class="skin-name">黑桃皇牌</p>
<p class="hero-name">伊泽瑞尔</p>
</div>
</div>
</div>
<script src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// console.log($('.main>div:eq(2)').css('width','1280px').siblings().css('width','80px'))
// $('.main>div:eq(3)').css('width','1280px').siblings().css('width','80px')
//鼠标进入时间时，通过animate()动画效果改变当前宽度的属性，同时让其他兄弟宽度为80px
$('.main>div').mouseenter(function(){
//stop()，停止当前动画
//stop(true) 停止在这之前的动画
//animate()可写链式
$(this).stop(true).animate({
"width":"1280px"
}).siblings().stop(true).animate({
"width":"80px"
})
})
</script>
</body>
</html>
Vue
概念
Vue是一套基于JavaScript实现的渐进式框架，用于构建用户界面
其核心，为响应式数据驱动，由数据的更新实现页面的更新，可简化DOM操作
官网
在HTML中使用Vue
引入vue.js文件
下载vue.js文件，本地引入
<script src="./js/vue.js"></script>
引入在线vue.js文件 https://v2.cn.vuejs.org/v2/guide/installation.html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
在html页面body中新建一个div，id命名为app
<body>
<div id="app"></div>
<script src="./js/vue.js"></script>
<script></script>
</body>
在script中创建vue应用，绑定到刚创建的div上
<script>
//创建一个Vue应用，绑定到页面中的某个节点上
var app = new Vue({
//绑定到id=app的节点上
el:"#app"
});
</script>
定义数据
<script>
//创建一个Vue应用，绑定到页面中的某个节点上
var app = new Vue({
//绑定到id=app的节点上
el:"#app",
//data属性用于定义Vue应用中的所有数据
data:{
//使用键值对的形式定义数据
//字符串、对象、数组
message:"hello world",
person:{//对象
name:'张明',
age:20,
sex:'男'
},
arrays:['a','b','c','d'],
},
});
</script>
{{变量}}，插值表达式
<body>
<div id="app">
<!-- {{}} 称为插值表达式，用于双标签中输出data中定义的变量数据 -->
<!-- 随着在控制台对变量进行访问，若对其变量重新赋值，其会页面数据会响应式数据改变 -->
<h1>{{message}}</h1>
<p>{{person}}</p>
<!-- { "name": "张明", "age": 20 } -->
<p>{{person.age}}</p>
<!-- 取对象的某个属性的值：20 -->
<p>{{arrays}}</p>
<!-- [ "a", "b", "c", "d" ] -->
<p>{{arrays[3]}}</p>
<!-- 取数组的某个元素：d -->
</div>
</body>
在浏览器的控制台中，输入app.data中的某个变量，就能看到其中的数据；
如果对其重新赋值，页面就会自动更新
具体用法
{{变量}} ：插值表达式，在双标签中显示
v-bind:属性=‘变量’, 动态属性，简写 :属性=‘变量’
v-if=‘条件’ ，条件为：true，显示该标签；false，则没有该标签
v-show=‘条件’ ，条件为：true，显示该标签；false，则隐藏该标签(display：none)
v-model=‘变量’,双向绑定
v-for=‘(遍历出的元素,元素的索引) in 要遍历的集合’
v-on:事件名=‘函数’，简写：@事件名=‘函数’
{{变量}} ：插值表达式，在双标签中显示
<div id="app">
<!-- {{}} 称为插值表达式，用于双标签中输出data中的数据-->
<h1>{{msg}}</h1>
<p>{{person.name}}</p>
<p>{{arrays[0]}}</p>
</div>
v-bind:属性=‘变量’, 动态属性，简写 :属性=‘变量’
<!-- 动态属性 -->
<p v-bind:title="msg">悬停试试</p>
<!-- 简写 -->
<p :title="person.name">悬停试试</p>
v-if=‘条件’ ，条件为：true，显示该标签；false，则没有该标签
<!-- 分支判断 -->
<h1 v-if="person.age>=18">{{person.name}}已{{person.age}}岁，已成年</h1>
<!-- v-else-if 同理-->
<h1 v-else="person.age<18">{{person.name}}已{{person.age}}岁，未成年</h1>
v-show=‘条件’ ，条件为：true，显示该标签；false，则隐藏该标签(display：none)
<h1 v-show="true">一级标题</h1>
v-model=‘变量’,双向绑定
<input type="text" v-model="money">
<p>
当前金额{{money}}
</p>
v-for=‘(遍历出的元素,元素的索引) in 要遍历的集合’
<select>
<option v-for="(item,index) in arrays" :value="index">{{item}}</option>
</select
v-on:事件名=‘函数’，简写：@事件名=‘函数’
<div id="app">
//click事件触发test()函数
<button v-on:click="test()"></button>
<button @click="test()"></button>
</div>
<script>
//创建Vue应用
var app = new Vue({
el: "#app",
data: {},
//定义Vue中的函数
methods:{
test(){
alert("一个普通的函数");
}
}
});
</script>
Node.js
JS如果只是运行在浏览器上的话，用于控制HTML元素的行为
如果有一个能够脱离浏览器，也能解析JS的运行环境，就能通过JS进行服务端的开发
浏览器之所以能够解析JS，是因为每个浏览器都有一个解析JS的引擎
其中效率最高的是谷歌浏览器的V8引擎
Node.js是一个基于V8引擎的JavaScript运行环境
Node.js类似与Java的JVM
安装下载
建议下载LTS长期维护版https://nodejs.org/zh-cn
旧版本https://nodejs.org/zh-cn/download/releases
安装成功后，在(win+R cmd)控制台输入"node -v"，显示当前Node.js版本
可以新建一个.js文件，通过"node js文件"命令来执行该js文件
console.log('Hi!!!!!!!!!')
npm
npm是Node.js的默认包管理器，用于管理js文件，类似于Java中的Maven管理jar文件
安装了Node.js后，自动会安装npm，这里只需更改其下载js的路径即可
- 控制台输入npm -v，查看npm版本
- 控制台输入npm config get registry，查看js下载地址
原始npm下载地址(国外站点)：https://registry.npmjs.org/
直接修改npm默认下载地址
改为国内站点：淘宝npm镜像，在控制台输入
修改：npm config set registry https://registry.npmmirror.com
查看修改：npm config get registry
额外添加一个指令，用国内站点下载
npm install -g cnpm --registry https://registry.npmmirror.com
这样不会修改原本npm的下载路径，之后通过cnpm指令使用国内站点下载
8.29
创建工程
在要创建的目录里输入cmd ，敲回车Enter 键进入控制台
输入npm create vue@latest，会弹出工程的选项，通过左右键选择
npm create vue@latest :创建vue3工程
创建成功后的这三句话表示：
cd 工程名 ：进入创建的工程目录[tab键补齐]
npm install ：安装工程所需要的包 ——npm install
npm run dev ：启动Vue3工程 ——npm run dev
启动工程后，保持控制台界面开启，在浏览器中输入localhost:5173，即可进入创建好的Vue3工程
使用VSCode管理Vue工程
VSCode是一款热门主流的编辑器，可以安装丰富的插件，实现对各种语言的支持
常用插件和设置
插件
中文
Volar
IDEA快捷方案
内置浏览器
设置
自动保存
Vue工程目录结构
将创建好的Vue工程目录，整体拖入VSCode中即可
router：路由表，.ts类似于.js文件
views：项目中的页面，以.vue结尾
App.vue：项目首页
main.ts：核心入口文件
vite.config.ts：项目配置文件
运行Vue工程
新建一个终端，输入 npm run dev 命令 ——npm run dev
如果创建好Vue工程后，直接使用VSCode管理时，则先输入npm install安装js文件——npm install 、再输入npm run dev 命令 ——npm run dev；
如果已经安装，直接输入npm run dev；
最后打开浏览器输入localhost:5173
在创建好的Vue工程中自定义页面访问[自定义vue]
在views的目录下，新建一个.vue文件
.vue文件类似于.java文件，需要编译后生成最终页面
.vue文件中有三个根标签
-
template
用于定义页面中的标签/节点
- vue2.x版本中，template下只能有一个根标签
- vue3.x版后，template下没有标签的限制
-
style
页面中的css代码，控制节点的CSS样式
- scoped，表示当前样式只在当前页生效
-
script
页面中的js代码
- ang=“ts” ，表示支持ts
- setup，是对于setup()函数的简写
<script setup>中的代码会在每次组件实例被创建的时候执行
<template>
<h1>我的页面</h1>
</template>
<!-- scoped表示，当前样式只在当前页生效 -->
<!-- 控制css节点样式 -->
<style scoped>
h1 {
color: red;
}
</style>
<!-- js -->
<!-- lang="ts" 表示支持ts setup是对于setup()函数的简写 -->
<!-- <script setup>中的代码会在每次组件实例被创建的时候执行 -->
<script setup lang="ts">
console.log("hi")
</script>
设置页面的请求映射[在router路由表导入自定义vue文件]
router路由表，决定某个.vue页面使用什么映射访问
设置访问方式一：先import导入.vue页面，让其成为一个组件；再在routes中使用该组件
设置访问方式二：在routest中直接导入某个.vue页面
先import导入.vue页面，再在routes中使用该组件
path表示访问映射，name没有限制，component为上方import导入某个组件
通过， / 访问导入该页面的路径
import { createRouter, createWebHistory } from 'vue-router'
// 方式一中导入某个.vue文件的代码
import MyPage from '../views/MyPage.vue'
// 路由表，用于决定某个.vue页面使用什么映射访问
// 设置访问方式一：先导入.vue页面，让其成为一个组件，再在routes中使用该组件
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
// 通过对象数组的形式定义访问映射
routes: [
// path表示访问映射，name没有限制，component为上方import的某个组件
//这里表示可以通过/访问../views/HomeView.vue页面
{
path: "/myPage",
name: 'myPage',
component: MyPage //先导入，再引入
},
]
})
export default router
在routest中直接导入某个.vue页面
// 设置访问方式二：在routest中直接导入某个.vue页面
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
// 通过对象数组的形式定义访问映射
routes: [
// path表示访问映射，name没有限制，component为上方import的某个组件
//这里表示可以通过/访问../views/HomeView.vue页面
{
path: "/myPage",
name: 'myPage',
component: () => import('../views/MyPage.vue')//直接导入并引入
},
]
})
export default router
在首页中设置访问的链接
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"
/>
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<!--设置在首页设置访问跳转链接 -->
<RouterLink to="/myPage">我的页面</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
在App.vue中有两个核心标签
< RouterLink to=“/path”/>访问指定path对应的.vue页面
< RouterLink to=“/path”/> ：用于访问指定的path对应的.vue页面 —— <RouterLink to="/path"/>
< RouterView/>：显示vue页面的容器
< RouterView/> ：用于显示vue页面的容器 ——<RouterView/>
.vue文件详解
每一个.vue文件中，至少需要template或script标签
- 在template中定义页面中出现的标签
- script中定义js
<script setup> ，表示页面加载后开始执行其中定义的内容
onMounted()函数
当每次访问页面时，都会执行onMounted()函数，通常用于访问后端接口，在script中
先导入组件，即**import {onMounted} from 'vue'；再使用onMounted(匿名函数)，即onMounted(()=>{//页面加载需要执行的内容})**
<script setup lang='ts'>
import {onMounted} from 'vue';
onMounted(()=>{
//页面加载时要执行的内容
});
</script>
页面中定义数据
ref()函数和reactive()函数
ref()函数
ref()函数，可以定义任意类型的数据；在函数中使用时，需要通过，变量.value才能获取值
reactive()函数
不能定义简单类型的数据，如字符串、数值；在函数中直接使用；reactive()函数属于ref()的子集；
当使用ref()定义复杂类型的数据时，实际也是使用reactive()函数
<template>
//template中使用定义的数据，直接使用
<h3>{{msg}}</h3>
<h3>{{person.name}} </h3>
<ul>
<li v-for="(item,index) in list">{{item}}</li>
</ul>
</template>
<script setup lang='ts'>
import {ref,reactive} from 'vue';
//声明值
//const 常量名 = ref(任意值)/reactive(非简单类型值);
//数据类型，字符串、数字、对象、数组
const msg=ref('普通字符串');
const count=ref(123);
const person=reactive({
name:'ez',
age:20
})
const list = reactive([123,2,33,4])
</script>
页面中定义函数
const 函数名 = function(){}
const 函数名 = ()=>{}
在函数中，使用ref()定义的变量,通过 .value 才能取到变量的值，变量.value；
使用reactive()定义的变量：直接用即可，变量
<template>
<button @click="addCount()">{{count}}</button>
<button @click="addAge()">{{person.age}}</button>
</template>
<script setup lang='ts'>
import {ref,reactive} from 'vue';
const count = ref(0);
const person = reactive({
name:'ez',
age:20
});
const addCount=function(){
//count是ref定义，需要.value
count.value++;
}
const addAge=()=>{
//age是person的属性，由reactive定义，不需要.value
person.age++;
}
</script>
使用Axios访问后端接口
axios是一个http请求组件，类似于ajax
axios的使用
1、安装到项目中
在项目中新建终端，输入命令npm install axios —— npm install axios
2、在页面中使用
先导入axios组件，再使用axios组件
导入import axios组件
import axios from 'axios'
使用axios
axios.get(“url”); —— 表示使用axios通过get请求访问指定的ur
xios.get(“url”).then(res=>{res表示访问的结果，数据保存在res.data中}); ——表示访问后的回调函数，通常用于获取访问的结果
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
// 导入axios工具
import axios from 'axios';
//定义state的值，用于保存当前页面中可能要用到的数据
const state = reactive({
personInfo: [],
msg: '',
count: 0
});
//通过访问json文件来模拟访问后端接口。在访问该页面时访问json文件。
onMounted(() => {
//通过类似于ajax的axios访问.json文件
//axios.get("后端接口路径"); axios.get("http://192.168.125.3/appName/xxxx");
//axios.get("url").then(ref=>{这里的res就是返回结果，访问后的数据在其中的data属性里});
获取请求后的返回值
axios.get("../../public/data.json").then(res => {
//res.data就是json文件中的所有内容
// res.data.data就是json文件中的名为data的属性
state.personInfo = res.data.data;
});
});
</script>
vue组件库
饿了么公司推出的element是常用的主流vue组件库
- vue2.x版本，使用element-ui：Element - 网站快速成型工具
- vue3.x版本，使用element-plus：Vue 3 UI 框架 |Element Plus
创建一个空白的Vue3工程
按创建Vue3工程的流程，使用VSCode打开
删除
-
component目录下的所有内容
-
views目录下的所有内容
-
assets目录下的所有内容
-
router目录下的index.ts文件中涉及到.vue文件的内容
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ /* { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } */ ] }) export default router -
main.ts中的引入样式
import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') -
App.vue中删除所有，重新定义跟标签
<template></template> <style scoped></style> <script setup lang="ts"></script>
使用ElementPlus
引入ElementPlus
先在终端install，后在main.ts导入；
在项目中新建终端，输入npm install element-plus --save
npm install element-plus --save
在项目中main.ts中，导入import ElementPlus from ‘element-plus’、import ‘element-plus/dist/index.css’、app.use(ElementPlus)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
注意,无论导入任何，app.mount(‘#app’)一定放在最后
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// elementplus相关
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
图标的使用
建议先全局引入所有图标组件，再使用图标标签即可
在main.ts中加入图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component)}
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// elementplus相关
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//图标相关
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(router)
//elementplus
app.use(ElementPlus)
//图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)}
app.mount('#app')
在要使用图标的地方，复制图标代码即可；代码赋值到.vue文件的template中
<!--图标代码，自选复制-->
<el-icon><Promotion /></el-icon>
导航切换页面router与<RouterView />
-
在view目录下自定义.vue页面，在router下index.ts(路由表)中设置访问该页面的path
-
复制导航条的代码
-
el-menu标签中，添加router属性值后，使index的值与router下index.ts(路由表)中的path相对应
<el-menu default-active="1-3" router class="el-menu-vertical-demo"> <el-sub-menu index="one"> <template #title> <el-icon> <location /> </el-icon> <span>Navigator One</span> </template> <el-menu-item index="myPage"> <el-icon> <Promotion /> </el-icon>菜单一 </el-menu-item> <el-menu-item index="1-2">item 2</el-menu-item> <el-menu-item index="1-3">item 3</el-menu-item> </el-sub-menu> <el-menu-item index="2"> <el-icon> <Promotion /> </el-icon> <span>Navigator Two</span> </el-menu-item> </el-menu>
-
-
在适当的位置添加容器**
<RouterView />**用于显示vue页面<el-main> <!-- 显示vue页面的容器 --> <RouterView /> </el-main>
绘制表格
app.vue
<template>
<div class="common-layout">
<el-container>
<el-header>
头部
</el-header>
<el-container>
<el-aside width="200px">
<el-menu
active-text-color="#ffd04b"
background-color='rgb(178, 143, 143)'
router
class="el-menu-vertical-demo"
default-active="table1"
text-color="#fff"
>
<el-sub-menu index="1">
<template #title>
<el-icon><Reading /></el-icon>
<span>数据展示</span>
</template>
<el-menu-item index="table1"><el-icon><Grid /></el-icon>数据表格</el-menu-item>
<el-menu-item index="table2"><el-icon><EditPen /></el-icon>功能表格</el-menu-item>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><Picture /></el-icon>
<span>数据表单</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<RouterView/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<style scoped>
.el-header{
background-color: rgb(155, 121, 121);
color: aliceblue;
}
.el-aside{
background-color:rgb(178, 143, 143)
}
.el-container{
height: calc(100vh - 20px);
background-color: rosybrown;
}
</style>
<script setup lang="ts">
</script>
table2.vue
<template>
<el-table :data="filterTableData" style="width: 100%">
<el-table-column prop="id" label="编号"/>
<el-table-column prop="username" label="姓名" width="120" />
<el-table-column prop="sex" label="性别" width="120"/>
<el-table-column prop="city" label="城市" width="120"/>
<el-table-column prop="logins" label="logins" width="120"/>
<el-table-column align="right">
<template #header>
<el-input v-model="state.searchWord" size="small" placeholder="请输入搜索" />
</template>
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 弹窗层布局 -->
<el-dialog v-model="state.dialogFormVisible" title="编辑">
<!--:model="form" 控制表单中的数据 -->
<el-form :model="state.form">
<!-- readonly 只读不可修改 -->
<el-form-item label="编号" :label-width="state.formLabelWidth">
<el-input v-model="state.form.id" readonly autocomplete="off" />
</el-form-item>
<el-form-item label="姓名" :label-width="state.formLabelWidth">
<el-input v-model="state.form.username" autocomplete="off" />
</el-form-item>
<el-form-item label="性别" :label-width="state.formLabelWidth">
<el-input v-model="state.form.sex" autocomplete="off" />
</el-form-item>
<el-form-item label="城市" :label-width="state.formLabelWidth">
<el-input v-model="state.form.city" autocomplete="off" />
</el-form-item>
<el-form-item label="logins" :label-width="state.formLabelWidth">
<el-input v-model="state.form.logins" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="state.dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="state.dialogFormVisible = false">
确认
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import {reactive,onMounted ,computed} from 'vue';
import axios from 'axios';
const state=reactive({
tableData:[],
searchWord:"",
dialogFormVisible:false,
formLabelWidth:'140px',
// 弹出层表单中的数据
form:{}
})
onMounted(()=>{
axios.get('../../public/data.json').then(res=>{
state.tableData=res.data.data
})
})
// 弹窗层参数
// 删除按钮触发事件
const handleDelete = (index, row) => {
// 将当前行的id得到后，访问后端删除的方法
//console.log(row.id)
//假删除，splice(位置，个数),从哪个位置起切除几行
state.tableData.splice(index,1)
}
//使用computed()函数进行数据过滤，过滤后的数据为filterTableData，将其设置为表格的data属性
// computed()函数,需要先导入后使用
const filterTableData = computed(() =>
state.tableData.filter(
(data) =>
!state.searchWord ||
data.username.toLowerCase().includes(state.searchWord.toLowerCase())
)
)
// 编辑按钮触发事件
// index 当前点击的行索引、row表示该行数据
const handleEdit = (index: number, row: User) => {
// 点击编辑，让弹出层显示
state.dialogFormVisible = true;
// 将当前行中的所有内容，赋值给form对象
state.form=row;
// console.log(index, row)
}
</script>
router下的index.ts
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// {
// path: '/about',
// name: 'about',
// component: () => import('../views/AboutView.vue')
// }
{
path: '/table1',
component: () => import('../views/Table1.vue')
} ,
{
path: '/table2',
component: () => import('../views/Table2.vue')
}
]
})
export default router
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// elementPlus相关
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')
/ 点击编辑，让弹出层显示
state.dialogFormVisible = true;
// 将当前行中的所有内容，赋值给form对象
state.form=row;
// console.log(index, row)
}
router下的index.ts
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// {
// path: '/about',
// name: 'about',
// component: () => import('../views/AboutView.vue')
// }
{
path: '/table1',
component: () => import('../views/Table1.vue')
} ,
{
path: '/table2',
component: () => import('../views/Table2.vue')
}
]
})
export default router
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// elementPlus相关
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')
扫一扫
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
