完整代码部分 (仅供参考哈)：
<template>
<div>
<label prop="name"> 姓名： </label>
<Input v-model="companyName" id="pp" style="width: 120px" placeholder="请输入" />
<Button @click="search" type="primary" icon="ios-search">查询</Button>
<Button type="primary" @click="addBus" icon="ios-add-circle-outline">新增</Button>
<Table :columns="columns1" :data="data1" size="small" ref="table">
<template slot-scope="{ row }" slot="name">
<strong>{{ row.name }}</strong>
</template>
<template slot-scope="{ row, index }" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button>
<Button type="warning" style="margin-right: 5px" size="small" @click="editBus(row,index)">编辑</Button>
<!-- 前面的小图标会居中挡住文字 设置一下样式就好了 style="text-align:left" -->
<Poptip
style="text-align:left"
confirm
title="您确定要删除该信息?"
placement="left-end"
@on-ok="remove(index)"
@on-cancel="cancel1"
>
<Button type="error" size="small">删除</Button>
<!-- @click="remove(index)" -->
</Poptip>
</template>
</Table>
<Modal
v-model="handleModal"
title="新增一条数据"
@on-ok="ok"
@on-cancel="cancel"
:footer-hide="true"
:mask-closable="false"
width=""
@on-visible-change="handleReset('formValidate')"
>
<Form inline ref="formValidate" :model="formValidate" :label-width="" :rules="ruleValidate">
<FormItem label="姓名" prop="name">
<Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
</FormItem>
<FormItem label="年龄" prop="age">
<Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
</FormItem>
<FormItem label="爱好" prop="address">
<Input v-model="formValidate.address" placeholder="请输入你的爱好"></Input>
</FormItem>
<FormItem label="性别" prop="sex">
<Input v-model="formValidate.sex" placeholder="别不男不女"></Input>
</FormItem>
<FormItem>
<!-- 提交的单击事件 在下面的方法里面写好 -->
<Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
</FormItem>
</Form>
</Modal>
<!-- 分页控件 -->
<div style="margin: 10px;overflow: hidden">
<div style="float:left">
<Page
:total="dataCount"
:page-size="pageSize"
show-total
:current=""
@on-change="changepage"
></Page>
</div>
</div>
</div>
</template>
<script>
import { Script } from "vm";
let testData = {
histories: [
{
name: "老王",
age: ,
sex: "男",
address: "我喜欢吃苹果"
},
{
name: "张三",
age: ,
sex: "男",
address: "我喜欢吃炸鸡"
},
{
name: "张欧",
age: ,
sex: "男",
address: "我喜欢吃西瓜"
},
{
name: "张五",
age: ,
sex: "男",
address: "我喜欢吃阿弥光"
},
{
name: "国基",
age: ,
sex: "男",
address: "我喜欢吃烤鸭"
},
{
name: "老王",
age: ,
sex: "女",
address: "我喜欢吃苹果"
},
{
name: "张三",
age: ,
sex: "女",
address: "我喜欢吃炸鸡"
},
{
name: "张欧",
age: ,
sex: "女",
address: "我喜欢吃西瓜"
},
{
name: "张五",
age: ,
sex: "女",
address: "我喜欢吃阿弥光"
},
{
name: "国基",
age: ,
sex: "女",
address: "我喜欢吃烤鸭"
} ]
};
export default {
data() {
return {
// 这里需要设置原数据为空
// 好像跟实例化一样 不然会出错的
data1: [],
companyName: "",
// modal开始为false
handleModal: false, // 这个对应form里面的数据不能少 名字不规范我就不改了
// columns1 和formvalidate 里面的命名要一样 别乱了
formValidate: {
name: "",
flight: "",
begin: "",
destination: ""
},
// 分页 ajaxHistoryData: [],
// 初始化信息总条数
dataCount: ,
// 每页显示多少条
pageSize: ,
// 设置table的表头
columns1: [
{
title: "姓名",
key: "name"
},
{
title: "年龄",
key: "age"
},
{
title: "爱好",
key: "address"
},
{
title: "性别",
key: "sex"
},
{
title: "操作",
slot: "action",
width: ,
align: "center"
}
],
// 设置表格的数据
tableData: []
};
},
// 方法
methods: {
// 查找按钮
search() {
// 获取表格数据
var len = testData.histories;
// 设置一个空的数组
var arr = [];
// 循环遍历
for (var i in len) {
// if判断 如果文本框中的值等于表格中name的值 输出
if (len[i].name == this.companyName) {
arr.push(len[i]);
// 如果等于空就给他全部数据
} else if (this.companyName == "") {
this.data1 = testData.histories;
return;
}
}
// 将查找出来的数据给表格
this.data1 = arr;
},
// 新增按钮的单击事件
addBus() {
this.handleModal = true;
this.modalTitle = "新增";
},
// 新增数据
handleSubmit(name) {
var self = this;
self.$refs[name].validate(valid => {
if (valid) {
var params = JSON.parse(JSON.stringify(self.formValidate)); if (self.modalTitle == "新增") {
// 获取需要渲染到页面中的数据
self.$Message.success("新增成功!");
self.data1.push(params);
} else {
this.$set(self.data1, self.itemIndex, params);
self.$Message.success("修改成功!");
}
self.handleModal = false;
} else {
if (self.modalTitle == "新增") {
self.$Message.error("新增失败!");
} else {
self.$Message.error("修改失败!");
}
}
});
},
// 修改方法
editBus(item, index) {
this.handleModal = true;
this.modalTitle = "修改";
this.itemIndex = index;
this.formValidate = JSON.parse(JSON.stringify(item));
},
// 删除一条数据
remove(index) {
this.data1.splice(index, );
// on-click 方法 冒泡提示确定
this.$Message.success("删除成功");
},
cancel1() {
this.$Message.info("取消删除");
},
// 清除文本框 重置
handleReset(name) {
this.$refs[name].resetFields();
},
// 详情显示
show(index) {
this.$Modal.info({
title: "查看详情",
content: `姓名:${this.data1[index].name}<br>年龄:${this.data1[index].age}
<br>爱好:${this.data1[index].address}<br>性别:${this.data1[index].sex}
`
});
},
// 分页
handleListApproveHistory() {
// 保存取到的所有数据 this.ajaxHistoryData = testData.histories;
this.dataCount = testData.histories.length;
// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
if (testData.histories.length < this.pageSize) {
this.data1 = this.ajaxHistoryData;
} else {
this.data1 = this.ajaxHistoryData.slice(, this.pageSize);
}
},
changepage(index) {
this.page = index;
var _start = (index - ) * this.pageSize;
var _end = index * this.pageSize;
this.data1 = this.ajaxHistoryData.slice(_start, _end);
} }, // 这个应该是加载事件 加载页面的时候就调用
// mounted() {
// // 页面一加载就将数据给出给表格
// this.data1 = testData.histories;
// },
created() {
this.handleListApproveHistory();
} };
</script> <style>
</style>