php 表头排序,Vue 实现表格搜索、固定表头与排序

在搜索完，删除搜索内容后展示所有的内容，用computed就比较容易实现，思路：v-model绑定搜索关键字，在tbody的tr上v-for循环计算属性。methods也可以实现需要改成

AdminLTE 2 | Morris.js Charts

IDMessageNameCountryAmount

{{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 Demo

td {

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)

})

})

}

},

})