Vue 实现表格搜索、固定表头与排序 原
在搜索完，删除搜索内容后展示所有的内容，用computed就比较容易实现，思路：v-model绑定搜索关键字，在tbody的tr上v-for循环计算属性。methods也可以实现需要改成
<tr v-for="item in filterData（）">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>AdminLTE 2 | Morris.js Charts</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
<!-- Morris charts -->
<link rel="stylesheet" href="../../dist/css/Basic.css"/>
<link rel="stylesheet" href="../../dist/css/lanrenzhijia.css"/>
</head>
<body class="">
<div id="todo-list-example">
<input type="text" placeholder="please enter" v-model="searchContent">
<!-- <button v-on:click="addlist">过滤</button> -->
<table>
<thead>
<tr>
<th>ID</th>
<th>Message</th>
<th>Name</th>
<th>Country</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr v-for="item in filterData">
<td>{{item.id}}</td>
<td>{{item.message}}</td>
<td>{{item.name}}</td>
<td>{{item.country}}</td>
<td>{{item.amount}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
var example1 = new Vue({
el: '#todo-list-example',
data: {
newtext: "",
searchContent: "",
items: [
{id: 1, message: 'this is jake', name: "jake", country: "cn", amount: 123},
{id: 2, message: 'this is lily', name: "lily", country: "USA", amount: 12},
{id: 3, message: 'this is jase', name: "jase", country: "cn", amount: 1},
{id: 4, message: 'this is john', name: "john", country: "USA", amount: 15.5},
{id: 5, message: 'this is make', name: "make", country: "cn", amount: 13},
{id: 6, message: 'this is jim', name: "jim", country: "USA", amount: 18},
{id: 7, message: 'this is san', name: "san", country: "cn", amount: 100},
{id: 8, message: 'this is olive', name: "olive", country: "Jap", amount: 128},
]
},
computed: {
filterData: function () {
var searchContent = this.searchContent && this.searchContent.toLowerCase()
var items = this.items
var items1
if (searchContent) {
items1 = items.filter(function (item) {
//console.log(Object.keys(item))
//return item.country.toLowerCase().match(searchContent);
//Object.keys(item)遍历item对象里面的键值是否符合回调函数的测试，通过测试则返回true，否则为false。
return Object.keys(item).some(function (key) {
return String(item[key]).toLowerCase().match(searchContent)
})
})
} else {
items1 = this.items
}
return items1
}
}
})
</script>
</body>
</html>如果配合Element UI表格插件实现搜索，排序与固定表头与表格左列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Bootstrap Table Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=<!-- no">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
td {
white-space: nowrap;
}
</style>
</head>
<body class="">
<div id="table">
<el-input v-model="input" placeholder="请输入内容" style="margin-bottom:15px;"></el-input>
<!-- :default-sort="{prop: 'id', order: 'descending'}" 默认排序-->
<el-table :data="filterData" border stripe style="width: 100%" v-bind:height="height" >
<el-table-column prop="id" label="Id hi" sortable fixed width="180">
</el-table-column>
<el-table-column prop="name" label="Item name" width="180">
</el-table-column>
<el-table-column prop="url" label="网址" width="180">
</el-table-column>
<el-table-column prop="alex" label="Alex" sortable>
</el-table-column>
<el-table-column prop="name" label="Item name" width="180">
</el-table-column>
<el-table-column prop="url" label="网址" width="180">
</el-table-column>
<el-table-column prop="alex" label="Alex">
</el-table-column>
<el-table-column prop="country" label="国家">
</el-table-column>
<el-table-column prop="country" label="国家">
</el-table-column>
</el-table>
</div>
<script src="../jQuery/jQuery-2.1.4.min.js"></script>
<script src="../dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var app7 = new Vue({
el: '#table',
data: {
tableData:[],
input:"",
height:500
},
// created() {
// $.get("selectBtTable.php?action=init_data_list", data=>{
// alert("hi")
// this.tableData = JSON.parse(data);
// console.log(this.tableData)
// //转换数据类型
// // $.each(this.tableData3, function(index, item) {
// // this.id = Number(this.id)
// // })
// })
// },
computed:{
filterData: function () {
var input = this.input && this.input.toLowerCase()
var items = this.tableData
var items1
if (input) {
items1 = items.filter(function (item) {
//console.log(Object.keys(item))
//return item.country.toLowerCase().match(searchContent);
//Object.keys(item)遍历item对象里面的键值是否符合回调函数的测试，通过测试则返回true，否则为false。
return Object.keys(item).some(function (key1) {
return String(item[key1]).toLowerCase().match(input)
})
})
} else {
items1 = this.tableData
}
return items1
}
},
created() {
this.getData();
this.intervalGetData();
},
mounted() {
},
methods: {
intervalGetData() {
setInterval(() => {
// $.get("selectBtTable.php?action=init_data_list", data => {
// var data = JSON.parse(data);
// this.message = data;
// $('#tableTest1').bootstrapTable('load', this.message);
// //console.log(JSON.parse(data))
// console.log("get data")
// })
this.getData();
}, 3000)
},
getData() {
//es6 箭头函数的写法
// $.get("selectBtTable.php?action=init_data_list", data => {
// var data = JSON.parse(data);
// this.message = data;
// $('#tableTest1').bootstrapTable('load', this.message);
// console.log("init data")
// })
var that = this;
$.get("selectBtTable.php?action=init_data_list", function(data) {
var data = JSON.parse(data);
that.tableData = data;
//转换数据类型
$.each(that.tableData, function(index, item) {
this.id = Number(this.id)
})
})
}
},
})
</script>
</body>
</html>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017/12/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读