diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index 80dd4b83b7a605e31eb92945516f57f401111b74..8cf034af5492a7288d9188012861136e806ef07c 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -3,6 +3,20 @@
+
+ {{ showFliterList ? "收起" : "筛选" }}
+
+
新增
+ >新增
+
-
+
-
+
-
-
+
+
{{btn.label}}
- {{btn.label}}
- {{btn.line}}
+ @click="handleRemove(scope.row, btn.label)"
+ >{{ btn.label }}
+ {{ btn.label }}
+ {{
+ btn.line
+ }}
- {{scope.row[item.prop]}}
+ {{
+ scope.row[item.prop]
+ }}
- {{scope.row[item.prop]}}
+ {{ scope.row[item.prop] }}
@@ -134,15 +190,20 @@
circle
size="mini"
@click="handleCurrentChange(-1)"
- :disabled="pagination.page==1"
+ :disabled="pagination.page == 1"
>
- 第{{ pagination.page }}页 / 共{{ Math.ceil(pagination.total / pagination.rowsPerPage) }}页
+ 第{{ pagination.page }}页 / 共{{
+ Math.ceil(pagination.total / pagination.rowsPerPage)
+ }}页
@@ -169,7 +230,7 @@ export default {
"v-apaas-table-input": tableInput,
"v-apaas-table-select": tableSelect,
"v-apaas-table-umhref": tableUmhref,
- "d-confirm": DConfirm
+ "d-confirm": DConfirm,
},
props: {
// 表格型号：mini,medium,small
@@ -194,31 +255,31 @@ export default {
// },
searchShow: {
type: Boolean,
- default: false
+ default: false,
},
url: {
type: String,
- default: ""
+ default: "",
},
detailsUrl: {
type: String,
- default: ""
+ default: "",
},
rowprop: {
type: String,
- default: ""
+ default: "",
},
ready: {
type: Boolean,
- default: false
+ default: false,
},
addRowBtn: {
type: Boolean,
- default: false
+ default: false,
},
couldNotEdit: {
type: Boolean,
- default: false
+ default: false,
},
// 是否显示删除弹窗
isDialog: { type: Boolean, default: false },
@@ -229,48 +290,52 @@ export default {
title: "提示", //提示
message: "", //""
btnCancelText: "取消", //取消
- btnSubmitText: "确定"
+ btnSubmitText: "确定",
};
- }
+ },
},
refreshInit: { type: Boolean },
sortBy: {
type: String,
- default: ""
+ default: "",
},
searchNoName: { type: Boolean, default: false },
emptyText: {
type: String,
- default: "暂无数据"
+ default: "暂无数据",
},
autoAdd: {
type: Boolean,
- default: false
+ default: false,
},
border: {
type: Boolean,
- default: false
+ default: false,
},
stripe: {
type: Boolean,
- default: false
+ default: false,
},
radius: {
type: Boolean,
- default: false
+ default: false,
},
pageSizeShow: {
type: Boolean,
- default: false
+ default: false,
},
paginationShow: {
type: Boolean,
- default: false
+ default: false,
},
headerCellClassName: {
type: String,
- default: ""
- }
+ default: "",
+ },
+ filterList: {
+ type: Array,
+ default: null,
+ },
},
data() {
return {
@@ -278,7 +343,7 @@ export default {
pagination: {
rowsPerPage: 10,
page: 1,
- total: 0
+ total: 0,
},
delSelect: null,
helper: helper,
@@ -287,23 +352,26 @@ export default {
pageOptions: [
{
value: "10",
- label: "10"
+ label: "10",
},
{
value: "20",
- label: "20"
+ label: "20",
},
{
value: "50",
- label: "50"
- }
+ label: "50",
+ },
],
search: "",
- times: null
+ times: null,
+ showFliterList: false,
+ filterData: null,
};
},
mounted() {
this.getDataFromApiSync();
+ this.initFilterData();
},
watch: {
refreshInit: {
@@ -311,14 +379,20 @@ export default {
if (val) {
this.getDataFromApiSync();
}
- }
+ },
},
url: {
handler(val) {
this.getDataFromApiSync();
},
- deep: true
- }
+ deep: true,
+ },
+ filterList: {
+ handler(val) {
+ this.initFilterData();
+ },
+ deep: true,
+ },
},
methods: {
// get data
@@ -334,14 +408,14 @@ export default {
}
} else {
this.getDataFromApi().then(
- data => {
+ (data) => {
this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr));
this.pagination.total = data.total;
if (this.autoAdd) {
this.addRow();
}
},
- err => {
+ (err) => {
console.log("失败" + err);
}
);
@@ -354,7 +428,7 @@ export default {
this.all_url = `/static/data.json`;
this.$http
.get(this.all_url)
- .then(response => {
+ .then((response) => {
let newArr = response.data.data[this.url];
// if it is true url, total is response's total
let total = newArr.length;
@@ -403,7 +477,7 @@ export default {
this.$message({
showClose: true,
message: this.label + "成功",
- type: "success"
+ type: "success",
});
},
switchChange(val) {
@@ -440,10 +514,48 @@ export default {
},
getTableData() {
return this.selectedTabsPage;
- }
- }
+ },
+ isCurrentFilter(prop, filter) {
+ return (
+ this.filterData &&
+ this.filterData[prop] &&
+ this.filterData[prop].indexOf(filter) > -1
+ );
+ },
+ filterAction() {
+ this.showFliterList = !this.showFliterList;
+
+ if (this.showFliterList) {
+ this.$nextTick(() => {
+ let width =
+ this.$refs.filterContainer.getBoundingClientRect().width -
+ 20 * 2 - // 两侧padding
+ 100 - // 左侧标题
+ 20; // 距左侧标题的边距
+ console.log("每行最多可容纳" + Math.floor(width / 110) + "个filter");
+ });
+ }
+ },
+ initFilterData() {
+ if (this.filterList && this.filterList.length) {
+ this.filterData = {};
+ this.filterList.forEach((item) => {
+ this.$set(this.filterData, item.prop, []);
+ });
+ }
+ },
+ selectFilter(prop, filter) {
+ if (this.isCurrentFilter(prop, filter)) {
+ this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
+ } else {
+ this.filterData[prop].push(filter);
+ }
+ console.log(this.filterData);
+ },
+ },
};
+
\ No newline at end of file
+.ces_filter_container {
+ background-color: #f7f8f9;
+ padding: 14px 19px;
+ border: 1px solid #e3e5ef;
+ border-radius: 6px;
+ margin: 0 0 10px;
+}
+.ces_filter_container > li {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding-top: 12px;
+}
+.ces_filter_name {
+ width: 100px;
+ height: 30px;
+ flex-shrink: 0;
+ text-align: right;
+ font-size: 14px;
+ line-height: 30px;
+ font-weight: bold;
+ color: #1a2236;
+}
+.ces_filter_data {
+ width: calc(100% - 120px);
+ margin-left: 20px;
+ flex-grow: 1;
+ flex-wrap: wrap;
+ display: inline-flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding-bottom: 11px;
+}
+.ces_filter_container > li:not(:last-child) > .ces_filter_data {
+ border-bottom: 1px solid #e9ecf3;
+}
+.ces_filter_data > li {
+ flex-shrink: 0;
+ padding-right: 20px;
+}
+.ces_filter_data > li > a {
+ display: block;
+ height: 30px;
+ width: 90px;
+ box-sizing: border-box;
+ border-radius: 12px;
+ text-align: center;
+ cursor: pointer;
+ font-size: 14px;
+ line-height: 30px;
+ color: #58617a;
+}
+.ces_filter_data > li > a.current {
+ background-color: #515fe7;
+ color: #f4f7fc;
+}
+
diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue
index b3caa446f3e3e6cbb53f45535971d93028eb7199..44373c9859d58b02ee69f2b348ea991de068ee48 100644
--- a/src/pages/example_table.vue
+++ b/src/pages/example_table.vue
@@ -20,6 +20,7 @@
:emptyText="emptyText"
:stripe="true"
:pageSizeShow="true"
+ :filterList="filterList"
>
可编辑表格，供服务测试用