-
表格功能描述
- iview表格排序,多选搜索
- 扩展文本、日历搜索表头
-
基本实现思路
定义初始列信息如下:
columns1: [ { type: "selection", width: 60, align: "center" }, { title: "姓名", key: "name", fieldType: "1" }, { title: "年龄", key: "age", sortable: true }, { title: "地址", key: "address", filters: [ { label: "New York", value: "New York" }, { label: "London", value: "London" }, { label: "Sydney", value: "Sydney" } ], filterMethod(value, row) { return row.address.indexOf(value) > -1; } }, { title: "日期", key: "date", fieldType: "2" } ]
扩展表头:
//queryColumns 列数据 this.$set(queryColumns, "renderHeader", h => {});
-
代码
<template> <Table :columns="columns2" :data="nowData1"></Table> </template> <script> export default { name: "MyTable", data() { return { columns2: [], searchVal: { name: "", date: "" }, columns1: [ { type: "selection", width: 60, align: "center" }, { title: "姓名", key: "name", fieldType: "1" }, { title: "年龄", key: "age", sortable: true }, { title: "地址", key: "address", filters: [ { label: "New York", value: "New York" }, { label: "London", value: "London" }, { label: "Sydney", value: "Sydney" } ], filterMethod(value, row) { return row.address.indexOf(value) > -1; } }, { title: "日期", key: "date", fieldType: "2" } ], nowData1: [], data1: [ { name: "John Brown", age: 18, address: "New York No. 1 Lake Park", date: "2019-08-03" }, { name: "Jim Green", age: 24, address: "London No. 1 Lake Park", date: "2019-08-01" }, { name: "Joe Black", age: 30, address: "Sydney No. 1 Lake Park", date: "2019-08-02" }, { name: "Jon Snow", age: 26, address: "Ottawa No. 2 Lake Park", date: "2019-08-04" } ] }; }, created() { this.col(); this.nowData1 = this.data1; }, methods: { col() { for (let item in this.columns1) { this.setColumnSearch(this, this.columns1[item]); this.columns2.push(this.columns1[item]); } }, queryList() { let date = this.searchVal.date; let name = this.searchVal.name; if (name === "" && date === "") { this.nowData1 = this.data1; } else { this.nowData1 = this.data1.filter(function(item) { if (name === "") { return item.date === date; } else { return item.name === name; } }); } }, setColumnSearch(thisObj, queryColumns) { if (!queryColumns) return; // fieldType 1 input搜索,2 时间控件搜索 if ( queryColumns.fieldType && (queryColumns.fieldType === "1" || queryColumns.fieldType === "2") ) { this.$set(queryColumns, "renderHeader", h => { if (queryColumns.fieldType === "2") { return h("span", {}, [ h("span", queryColumns.title), h("Poptip", { props: { placement: "bottom", transfer: true } }, [ h( "Icon", { props: { type: "md-calendar" } }, queryColumns.title ), [ h("span", { slot: "content" }, [ h("DatePicker", { props: { type: "date", formate: "yyyy-mm-dd", size: "small", placement: "bottom-end", confirm: true, clearable: true }, on: { "on-change": function(data) { thisObj.searchVal.date = data; }, "on-ok": function() { // 触发查询事件 thisObj.queryList(); }, "on-clear": function() { // 触发查询事件 thisObj.searchVal.date = ""; thisObj.queryList(); } } }) ]) ] ]) ]); } else { return h("span", {}, [ h("span", queryColumns.title), h("Poptip", { props: { placement: "bottom", transfer: true } }, [ h( "Icon", { props: { type: "ios-search-outline" } }, queryColumns.title ), h("div", { slot: "content" }, [ h( "Row", { props: { gutter: 0 } }, [ h( "Col", { props: { span: "12" } }, [ h( "Icon", { props: { type: "ios-funnel" }, style: { marginRight: "5px" } }, h("span", "筛选") ) ] ), h( "Col", { props: { span: "12" }, style: { textAlign: "right" } }, [ h( "Button", { props: { type: "text", size: "small" }, style: { background: "none", bosShadow: "none", marginBottom: "3px", color: "#1565c0" }, on: { click: function() { document.querySelector( `div[ref=${queryColumns.title}]` ).children[2].value = ""; thisObj.searchVal.name = ""; // 触发查询事件 thisObj.queryList(); } } }, "重置" ) ] ) ] ), h("Input", { attrs: { ref: queryColumns.title }, props: { search: true, placeholder: "" }, on: { "on-search": function(data) { thisObj.searchVal.name = data; // 触发查询事件 thisObj.queryList(); } } }) ]) ]) ]); } }); } } } }; </script>
-
效果