vue实现搜索方法，将搜索到的数据替换为原来的数据

lionliu0519

已于 2023-04-17 00:20:20 修改

阅读量1.5k

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端 elementui

于 2023-04-14 15:30:08 首次发布

本文链接：https://blog.csdn.net/m0_51354601/article/details/130154868

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

     // 搜索方法，将搜索到的数据替换为原来的数据
            handleSearch() {
                axios
                    .get(`http://localhost:9999/student/findById/${this.input}`)
                    .then((res) => {
                        console.log(res.data);
                        this.$message({
                            message: "搜索成功",
                            type: "success",
                        });
                        // 将对象转化为数组
                        res.data = [res.data];
                        this.tableData = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },

    <el-input v-model="input" placeholder="通过id搜索"></el-input>
    <el-button type="primary" @click="handleSearch">搜索</el-button>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></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="sex" label="性别"></el-table-column>
        <el-table-column prop="class1" label="班级"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                >编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                >删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>