elementui 展示列表模板_vue+elementui +input输入框关键字筛选检索表格数据展示+分页功能...
第一种用axios发送请求到后台，需要后台配合，才能在表格里面渲染页面；想偷懒的小伙建议去直接粘贴复制第三种
border
ref="multipleTable"
:data="tables"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
type="selection"
width="55">
prop="lid"
label="数量"
width="120">
prop="lname"
label="名称"
width="120">
prop="price"
label="价格"
show-overflow-tooltip>
size="mini"
round class='el-icon-edit'
@click="handleDelete(scope.$index, scope.row)">修改
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-size="50"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
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);
});
}
}
.searchs{
display: inline-block;
width: 1300px;
}
第二种-只写查询样式-----------------------------------------------------------------------------------------------------------------------------------------