vue3
App.vue:
<template>
<el-button type="primary" @click="openAddDialog">新增</el-button>
<el-input
v-model="state.searchByUsername"
clearable
placeholder="输入用户名称搜索"
style="width: 400px; margin: 0 10px"
/>
<el-button type="success" @click="searchUser">搜索</el-button>
<el-table :data="state.tableData" style="width: 100%">
<el-table-column
label="用户名"
prop="username"
width="180"
></el-table-column>
<el-table-column label="密码" width="180">
<template #default="scope">
<el-tag>{
{ scope.row.password }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 弹窗 -->
<el-dialog
:destroy-on-close="true"
v-model="state_dialog.isShow"
:title="state_dialog.type == 'add' ? '新增' : '编辑'"
>
<el-form
ref="ref_form"
:model="state_dialog.form"
:rules="state_dialog.rules"
>
<el-form-item label="用户名" label-width="140px" prop="username">
<el-input
v-model="state_dialog.form.username"
clearable
autocomplete="off"
/>
</el-form-item>
<el-form-item label="密码" label-width="140px" prop="password">
<el-input
v-model.number="state_dialog.form.password"
clearable
autocomplete="off"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="state_dialog.isShow = false">取消</el-button>
<el-button type="primary" @click="submitForm(ref_form)">确定</el-button>
<el-button type="primary" @click="resetForm(ref_form)">重置</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import axios from "axios";
const ref_form = ref(null);
const state = reactive({
searchByUsername: "",
ta