今天内容1： 用Vue实现了进一步的查询，通过ID进行条件查询 这个内容基本上是在之前的整合的基础上做的修改 流程为： 页面添加搜索框
<el-table-column align="right">
<template slot="header" slot-scope="scope">
<div style="display: flex; align-items: center;">
<el-input
v-model="searchText"
size="mini"
placeholder="输入关键字搜索"/>
<el-button
size="mini"
@click="search">
搜索
</el-button>
</div>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="edit(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="remove(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
这里有一个点是要绑定搜索框和搜索内容，关于这一点
需要先在data中定义一个输入内容的属性
data() {
return {
searchText: '', // 初始化为空字符串
// 其他数据属性
};
},
然后需要在点击按钮的实现方法中获取到这个属性
<el-input
v-model="searchText"
size="mini"
placeholder="输入关键字搜索"
/>
computed:
{
search() {
const searchText = this.searchText;
if (searchText.trim() === '') {
// 如果搜索文本为空，执行这个逻辑
this.$axios({
method: 'get',
url: 'http://localhost:9090/student/findAll',
}).then((response) => {
this.tableData = response.data;
}).catch((error) => {
// 处理错误
console.error('请求出错：', error);
});
} else {
// 如果搜索文本不为空，执行这个逻辑
// 使用搜索文本构建 URL，并发送搜索请求
const url = `http://localhost:9090/student/search/${searchText}`;
this.$axios({
method: 'get',
url: url,
}).then((response) => {
this.tableData = response.data;
}).catch((error) => {
// 处理错误
console.error('请求出错：', error);
});
}
},
},
这里用了if else进行区分，是为了实现输入内容进行对应查询，如果没输入任何内容默认查询全部
关于外部这个computed 为什么不用method
computed 是Vue.js中的计算属性，它用于根据依赖的数据动态计算衍生的属性。计算属性的值在依赖数据发生变化时自动更新，并且会进行缓存，只有依赖的数据发生改变时，计算属性才会重新计算。计算属性通常用于根据已有的数据计算、过滤、映射或组合出新的数据，以供模板中使用。计算属性使用时无需加括号，直接像读取属性一样使用即可。
说人话就是 computed是动态的，实时变化，然后语法和method有一些区别
我也把search方法放到method下做了验证，得出的结论是，如果使用method，需要点击搜索按钮才能进行查询，而放在computed下会自动进行变化
就用户体验来说，肯定是computed更好一些。