第一种用axios发送请求到后台，需要后台配合，才能在表格里面渲染页面；想偷懒的小伙建议去直接粘贴复制第三种
<template>
<div class="tableDatas">
<div class="searchWord">
<div style="display: inline-block"> 搜索：</div>
<el-input v-model="search" class='searchs' placeholder="请输入搜索内容">
</el-input>
</div>
<!-- 遍历表格 -->
<el-table
border
ref="multipleTable"
:data="tables"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="lid"
label="数量"
width="120">
</el-table-column>
<el-table-column
prop="lname"
label="名称"
width="120">
</el-table-column>
<el-table-column
prop="price"
label="价格"
show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
round class='el-icon-edit'
@click="handleDelete(scope.$index, scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页功能 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-size="50"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
<!-- 总计 -->
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search:'',
isPaging:true, //是否显示分页
pageIndex:1, //当前页（必传）
pageSize :20, //每页多少条
currentPage:1, //当前显示3页
totalNumber: 1, //总条数
totalPage:1 , //总页数
pno:'1', // 页码
// 分页功能
currentPage4: 4,
tableData:[], //后台拿来的数据
// 表单功能
itemList: [],
multipleSelection: []
}
},
computed: {
// 模糊搜索
tables () {
const search = this.search
if (search) {
// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意： filter() 不会对空数组进行检测。
// 注意： filter() 不会改变原始数组。
return this.tableData.filter(data => {
// some() 方法用于检测数组中的元素是否满足指定条件;
// some() 方法会依次执行数组的每个元素：
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
// 如果没有满足条件的元素，则返回false。
// 注意： some() 不会对空数组进行检测。
// 注意： some() 不会改变原始数组。
return Object.keys(data).some(key => {
// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
// 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
return String(data[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.tableData
}
},
methods: {
// getData() {
// console.log('生命周期')
// this.axios.get('../../static/database.json').then(response => {
// console.log(response.data);
// this.tableData=response.data
// }, response => {
// console.log("error");
// });
// },
// 分页功能 页码大小 val控制每页多少条信息
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
// this.pagesize=`${val}`;
let url=`http://127.0.0.1:3000/getGoodList?pageSize=${val}`
this.axios.get(url).then(result=>{
this.tableData=result.data.data;
})
},
// 当页码数发生改变的时候执行的函数 val代表页数 没问题了
handleCurrentChange(val) {
console.log( `这是${val}页`)
let url=`http://127.0.0.1:3000/getGoodList?pno=${val}` //pno=${this.pno++}`
this.axios.get(url).then(result=>{
this.tableData=result.data.data;
})
},
// 表单功能
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
},
created(){
console.log('table测试页')
// this. getData();
let url='http://127.0.0.1:3000/getGoodList'
this.axios.get(url).then(result=>{
this.tableData=result.data.data;
console.log(this.tableData);
});
}
}
</script>
<style>
.searchs{
display: inline-block;
width: 1300px;
}
</style>
第二种-只写查询样式-----------------------------------------------------------------------------------------------------------------------------------------
<template>
<div>
<el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"></el-input>
<el-button type="primary" @click="doFilter">搜索</el-button>
<el-button type="primary" @click="openData">展示数据</el-button>
<el-table
:data="tableDataEnd"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 2, 3, 4]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalItems">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableDataBegin: [
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-03",
name: "王二虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-04",
name: "王二虎",
address: "上海市普陀区金沙江路 1516 弄"
},
{
date: "2016-05-05",
name: "王三虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-06",
name: "王三虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-07",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-08",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
tableDataName: "",
tableDataEnd: [],
currentPage: 4,
pageSize: 2,
totalItems: 0,
filterTableDataEnd:[],
flag:false
};
},
created() {
this.totalItems = this.tableDataBegin.length;
if (this.totalItems > this.pageSize) {
for (let index = 0; index < this.pageSize; index++) {
this.tableDataEnd.push(this.tableDataBegin[index]);
}
} else {
this.tableDataEnd = this.tableDataBegin;
}
},
methods: {
//前端搜索功能需要区分是否检索,因为对应的字段的索引不同
//用两个变量接收currentChangePage函数的参数
doFilter() {
if (this.tableDataName == "") {
this.$message.warning("查询条件不能为空！");
return;
}
this.tableDataEnd = []
//每次手动将数据置空,因为会出现多次点击搜索情况
this.filterTableDataEnd=[]
this.tableDataBegin.forEach((value, index) => {
if(value.name){
if(value.name.indexOf(this.tableDataName)>=0){
this.filterTableDataEnd.push(value)
}
}
});
//页面数据改变重新统计数据数量和当前页
this.currentPage=1
this.totalItems=this.filterTableDataEnd.length
//渲染表格,根据值
this.currentChangePage(this.filterTableDataEnd)
//页面初始化数据需要判断是否检索过
this.flag=true
},
openData() {},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.handleCurrentChange(this.currentPage);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
//需要判断是否检索
if(!this.flag){
this.currentChangePage(this.tableDataEnd)
}else{
this.currentChangePage(this.filterTableDataEnd)
}
}, //组件自带监控当前页码
currentChangePage(list) {
let from = (this.currentPage - 1) * this.pageSize;
let to = this.currentPage * this.pageSize;
this.tableDataEnd = [];
for (; from < to; from++) {
if (list[from]) {
this.tableDataEnd.push(list[from]);
}
}
}
}
};
</script>
第三种：只写检索功能---------------------------------------------------------------------------------------------------------------------------------------
<template>
<div class="dormitory">
<div class="searchWord">
<div style="display: inline-block"> 搜索：</div>
<el-input v-model="search" style="display: inline-block;width: 1300px"
placeholder="请输入搜索内容">
</el-input>
</div>
<!-- // 遍历表格 -->
<div class="dormitoryData">
<el-table
border
ref="dormitoryTable"
:data="tables"
tooltip-effect="dark"
stripe
style="width: 100%">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column label="序号" type="index" width="65"></el-table-column>
<el-table-column label="人物" prop="people">
</el-table-column>
<el-table-column label="关系" prop="relationship">
</el-table-column>
<el-table-column label="初见" prop="meet">
</el-table-column>
<el-table-column label="地点" prop="place">
</el-table-column>
<el-table-column label="昵称" prop="execg">
</el-table-column>
<el-table-column label="认识年限" prop="year">
</el-table-column>
<el-table-column label="成名之作" prop="works">
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data () {
return {
dormitory: [{
people: '雷森',
relationship: '大学室友',
meet: '2010-09-02',
place: '图书馆',
execg: '胖子',
year: '8年',
works: '海阔天空'
}, {
people: '刘利伟',
relationship: '大学室友',
meet: '2010-09-02',
place: '5#633',
execg: '老大',
year: '8年',
works: '勇气'
}, {
people: '李金龙',
relationship: '大学室友',
meet: '2010-09-02',
place: '5#633',
execg: '二哥',
year: '8年',
works: '遇见'
}, {
people: '马康',
relationship: '大学室友',
meet: '2010-09-02',
place: '餐饮大厦',
execg: '康哥',
year: '8年',
works: '不再联系'
}, {
people: '牛光卫',
relationship: '大学室友',
meet: '2010-09-02',
place: '图书馆',
execg: '牛牛娃',
year: '8年',
works: '断点'
}, {
people: '陆兆攀',
relationship: '大学室友',
meet: '1991-07-27',
place: '百浪',
execg: '帅哥',
year: '27年',
works: '不再犹豫'
}, {
people: '小甜',
relationship: '亲密的人',
meet: '2016-10-05',
place: '小寨',
execg: '甜甜圈',
year: '2年',
works: 'Forever Love'
}],
search: ''
}
},
computed: {
// 模糊搜索
tables () {
const search = this.search
if (search) {
// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意： filter() 不会对空数组进行检测。
// 注意： filter() 不会改变原始数组。
return this.dormitory.filter(data => {
// some() 方法用于检测数组中的元素是否满足指定条件;
// some() 方法会依次执行数组的每个元素：
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
// 如果没有满足条件的元素，则返回false。
// 注意： some() 不会对空数组进行检测。
// 注意： some() 不会改变原始数组。
return Object.keys(data).some(key => {
// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
// 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
return String(data[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.dormitory
}
},
methods: {
}
}
</script>