在搜索完,删除搜索内容后展示所有的内容,用computed就比较容易实现,思路:v-model绑定搜索关键字,在tbody的tr上v-for循环计算属性。methods也可以实现需要改成
AdminLTE 2 | Morris.js ChartsIDMessageNameCountryAmount
{{item.id}}{{item.message}}{{item.name}}{{item.country}}{{item.amount}}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
}
}
})
如果配合Element UI表格插件实现搜索,排序与固定表头与表格左列
Vue Bootstrap Table Demotd {
white-space: nowrap;
}
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)
})
})
}
},
})