配置完路由，建立好页面直接复制以下代码即可。
注意：
BasePannel和BaseButton是自定义组件，需要删掉
代码：
<template>
<div class="app-container">
<BasePannel title="标题1">
<el-form size="small" :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-row>
<el-col :span="10">
<el-form-item label="测试单号" prop="number">
<el-input v-model="queryParams.number" placeholder="输入关键字搜索" clearable/>
</el-form-item>
</el-col>
<el-col :span="8">
<div>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
</BasePannel>
<BasePannel class="top-margin">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-col>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="TextName" label="测试单号" sortable width="180"></el-table-column>
<el-table-column prop="Status" label="测试单状态" width="180"></el-table-column>
<el-table-column prop="level" label="事务级别"></el-table-column>
<el-table-column prop="theme" label="主题"></el-table-column>
<el-table-column prop="Details" label="详情说明"></el-table-column>
<el-table-column prop="name" label="申请人姓名"></el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button type="text" class="delete_button" size="mini" @click="handleDelete(scope.$index, tableData)">删除</el-button>
<el-col :span="1.5">
<el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
</el-col>
</template>
</el-table-column>
</el-table>
</BasePannel>
<!-- 添加或修改【请填写功能名称】对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" class="rounded-dialog">
<el-form ref="form" :model="userInfo" label-width="80px">
<el-form-item label="测试单号" prop="number">
<el-input v-model="userInfo.TextName" placeholder="请输入测试单号" maxlength="30" />
</el-form-item>
<el-form-item label="测试单状态" prop="Status">
<el-input v-model="userInfo.Status" placeholder="请输入测试单状态" maxlength="30" />
</el-form-item>
<el-form-item label="事务级别" prop="level">
<el-input v-model="userInfo.level" placeholder="请输入事务级别" maxlength="30" />
</el-form-item>
<el-form-item label="主题" prop="theme">
<el-input v-model="userInfo.theme" placeholder="请输入主题" maxlength="30" />
</el-form-item>
<el-form-item label="详情说明" prop="Details">
<el-input v-model="userInfo.Details" placeholder="请输入测试单状态" maxlength="30" />
</el-form-item>
<el-form-item label="申请人姓名" prop="name">
<el-input v-model="userInfo.name" placeholder="请输入姓名" maxlength="30" />
</el-form-item>
<div class="dialog-footer">
<el-button type="primary" size="small" @click="submitForm()">确 定</el-button>
<el-button size="small" @click="cancel">取 消</el-button>
</div>
</el-form>
</el-dialog>
</div>
</template>
<script>
import BasePannel from "@/components/BasePannel";
import BaseButton from "@/components/BasePannel/buttons.vue";
export default {
name: "Manage",
components: {
BasePannel,
BaseButton,
},
data() {
return {
tableData: [],
loading: true,
title:'',
TextName: [],
showSearch: true,
// 查询参数
queryParams: {
number : null,
},
// 表单参数
userInfo: {},
open:false,
rowIndex:null,
};
},
created() {
this.getList();
},
methods: {
/** 查询【请填写功能名称】列表 */
getList() {
this.loading = true;
this.tableData= [
{ TextName: '1234567', Status: '已完成', level: 'ckfvvjgkn', theme: 'wwwww', Details: 'qwe234545234', name: 'zzz' },
{ TextName: '111111111', Status: '已完成', level: 'vrjeiuf8493', theme: 'rrewdw', Details: 'qwe234545234', name: 'assds' },
{ TextName: '22222222', Status: '已完成', level: 'yyhyr5', theme: 'qedfvf', Details: 'qwe234545234', name: 'qqq' },
{ TextName: '1234555', Status: '已完成', level: 'mjmky456h', theme: 'vfgbg', Details: 'qwe234545234', name: 'aaa' },
{ TextName: '11122222', Status: '已完成', level: 'c12445556', theme: 'ddcdsf', Details: 'qwe234545234', name: 'aaa' },
{ TextName: '1234566', Status: '已完成', level: 'jujyhj567', theme: '1333e4ff', Details: 'qwe234545234', name: 'abc' }
];
this.loading = false;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.userInfo = {
TextName: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
const searchText = this.queryParams.number;
if (searchText) {
this.tableData = this.tableData.filter(item => item.TextName.includes(searchText));
} else {
this.getList();
}
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams.number = null;
this.getList();
},
/** 新增按钮操作 */
handleAdd() {
this.title = "增加";
this.open = true;
this.userInfo = {};
},
/** 修改按钮操作 */
handleUpdate(row) {
this.title = "修改";
this.open = true;
this.userInfo ={
TextName:row.TextName,
Status:row.Status,
level:row.level,
theme:row.theme,
Details:row.Details,
name:row.name
}
this.rowIndex = this.tableData.indexOf(row);
},
/** 提交按钮 */
submitForm() {
if (this.title === '修改') {
this.tableData.splice(this.rowIndex, 1, this.userInfo);
this.open = false;
return;
}else{
this.tableData.splice(0, 0, this.userInfo);
this.open = false;
}
},
/** 删除按钮操作 */
handleDelete(index,row) {
this.$confirm(`确定删除选中的数据项吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error',
}).then(() => {
this.tableData.splice(index, 1);
});
},
},
};
</script>
