| 1 |
- {"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js??ref--0-2!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\dymic_table.vue?vue&type=style&index=0&id=6d0d2c4d&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\components\\common\\dymic_table.vue","mtime":1663828782925},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js","mtime":1540864632000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/deep/.dymic-table .el-table .el-table__body td p{\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n/deep/.dymic-table .el-table--enable-row-transition .el-table__body td{\r\n border:none;\r\n}\r\n.dymic-table .el-table {\r\n border-radius: 6px;\r\n}\r\n/deep/ .el-table{\r\n .el-table__header-wrapper thead tr th:nth-child(-n+2){\r\n .cell{\r\n width: max-content;\r\n }\r\n \r\n }\r\n}\r\n",{"version":3,"sources":["dymic_table.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2TA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA","file":"dymic_table.vue","sourceRoot":"src/components/common","sourcesContent":["<template>\r\n <div class=\"dymic-table scrollbar\">\r\n <el-table\r\n :height=\"height\"\r\n class=\"no-scrollbar\"\r\n :summary-method=\"getSummaries\"\r\n style=\"width: 100%\"\r\n :data=\"data\"\r\n :show-header=\"settings.showHeader\"\r\n size=\"small\"\r\n lazy\r\n v-loading=\"loading\"\r\n :row-class-name=\"setRowClassName\"\r\n :show-summary=\"!!(settings.summaryCol && settings.summaryCol.length)\"\r\n @selection-change=\"selectionChange\"\r\n :empty-text=\"emptyText\"\r\n >\r\n <el-table-column\r\n type=\"selection\"\r\n width=\"50\"\r\n align=\"center\"\r\n v-if=\"settings.showCheckbox\"\r\n :selectable=\"selectable\"\r\n ></el-table-column>\r\n <el-table-column\r\n label=\"No.\"\r\n type=\"index\"\r\n align=\"center\"\r\n v-if=\"settings.showIndex\"\r\n ></el-table-column>\r\n <el-table-column\r\n v-for=\"(item, index) in cols\"\r\n :key=\"index\"\r\n :width=\"item.width\"\r\n :min-width=\"item.minWidth\"\r\n :label=\"item.label\"\r\n :prop=\"item.prop\"\r\n align=\"center\"\r\n >\r\n <template v-if=\"item.children\" :label=\"item.label\">\r\n <el-table-column\r\n v-for=\"(item1, index1) in item.children\"\r\n :prop=\"item1.prop\"\r\n :key=\"index1\"\r\n :width=\"item.width\"\r\n :min-width=\"item.minWidth\"\r\n :label=\"item1.label\"\r\n align=\"center\"\r\n >\r\n <template slot-scope=\"scope\">\r\n <!-- 插槽 -->\r\n <slotItem v-if=\"item1.slot\" :row=\"scope.row\" :index=\"scope.$index\" :slots=\"$scopedSlots[item1.slot]\"></slotItem>\r\n <!-- 过滤方法 -->\r\n <p v-else-if=\"item1.format\" v-tip\r\n :data-txt=\"item1.format(scope.row[item1.prop],scope.row)\"\r\n @click=\"item1.click?item1.click():null\">\r\n {{\r\n item1.format(scope.row[item1.prop],scope.row)||\r\n (item1.format(scope.row[item1.prop],scope.row)===0?0:item1.empty?'':'-')\r\n }}\r\n </p>\r\n <!-- 默认显示 -->\r\n <p v-else-if=\"item1.fixToolTip\" v-tip.same :data-txt=\"scope.row[item1.prop]\" @click=\"item1.click?item1.click():null\">\r\n {{scope.row[item1.prop]||(scope.row[item1.prop]===0?0:item1.empty?'':'-')}}\r\n </p>\r\n <p v-else v-tip :data-txt=\"scope.row[item1.prop]\" @click=\"item1.click?item1.click():null\">\r\n {{scope.row[item1.prop]||(scope.row[item1.prop]===0?0:item1.empty?'':'-')}}\r\n </p>\r\n </template>\r\n <template v-if=\"item1.children\" :label=\"item1.label\">\r\n <el-table-column\r\n v-for=\"(item2,index2) in item1.children\" :prop=\"item2.prop\"\r\n :key=\"index2\"\r\n :width=\"item1.width\"\r\n :min-width=\"item1.minWidth\"\r\n :label=\"item2.label\"\r\n align=\"center\">\r\n <template slot-scope=\"scope\">\r\n <p v-if=\"item2.format\" v-tip\r\n :data-txt=\"item2.format(scope.row[item2.prop],scope.row)\"\r\n @click=\"item2.click?item2.click():null\">\r\n {{\r\n item2.format(scope.row[item2.prop],scope.row)||\r\n (item2.format(scope.row[item2.prop],scope.row)===0?0:item2.empty?'':'-')\r\n }}\r\n </p>\r\n </template>\r\n </el-table-column>\r\n </template>\r\n </el-table-column>\r\n </template>\r\n <template slot-scope=\"scope\">\r\n <!-- 插槽 -->\r\n <slotItem v-if=\"item.slot\" :row=\"scope.row\" :index=\"scope.$index\" :slots=\"$scopedSlots[item.slot]\"></slotItem>\r\n <!-- 过滤方法 -->\r\n <p v-else-if=\"item.format\" v-tip\r\n :data-txt=\"item.format(scope.row[item.prop],scope.row)\"\r\n @click=\"item.click?item.click():null\">\r\n {{\r\n item.format(scope.row[item.prop],scope.row)||\r\n (item.format(scope.row[item.prop],scope.row)===0?0:item.empty?'':'-')\r\n }}\r\n </p>\r\n <!-- 默认显示 -->\r\n <p v-else-if=\"item.fixToolTip\" v-tip.same :data-txt=\"scope.row[item.prop]\" @click=\"item.click?item.click():null\">\r\n {{scope.row[item.prop]||(scope.row[item.prop]===0?0:item.empty?'':'-')}}\r\n </p>\r\n <p v-tip v-else :data-txt=\"scope.row[item.prop]\" @click=\"item.click?item.click():null\">\r\n {{scope.row[item.prop]||(scope.row[item.prop]===0?0:item.empty?'':'-')}}\r\n </p>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n <div class=\"foot\">\r\n <!-- 手动全选及操作 -->\r\n <el-pagination\r\n class=\"pagination\"\r\n background\r\n @size-change=\"sizeChange\"\r\n @current-change=\"currentChange\"\r\n :current-page=\"currentPage\"\r\n :page-sizes=\"pageset.pageSizes || [15, 30, 60, 120]\"\r\n :page-size=\"pageset.pageSize || 15\"\r\n :total=\"pageset.total || 0\"\r\n layout=\"total, sizes, prev, pager, next, jumper\"\r\n >\r\n </el-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: \"dymic-table\",\r\n props: {\r\n /** 列数据*/\r\n cols: {\r\n type: Array,\r\n default() {\r\n return [];\r\n },\r\n },\r\n /**table数据*/\r\n data: {\r\n type: Array,\r\n default() {\r\n return [];\r\n },\r\n },\r\n /**table表格设置 */\r\n settings: {\r\n type: Object,\r\n default() {\r\n return {\r\n // 是否显示表头\r\n showHeader: false,\r\n // 是否显示序号\r\n showIndex: false,\r\n // 是否显示多选框\r\n showCheckbox: false,\r\n hideAllCheckbox: false,\r\n // 是否显示单选框\r\n showRadio: false,\r\n // 需要统计列的prop集合，从0开始\r\n summaryCol: [],\r\n };\r\n },\r\n },\r\n /**分页设置*/\r\n pageset: {\r\n type: Object,\r\n default() {\r\n return {\r\n total: 0,\r\n pageSize: 10,\r\n pageNum: 1,\r\n pageSizes: [15, 30, 60, 120],\r\n };\r\n },\r\n },\r\n loading: {\r\n type: Boolean,\r\n default() {\r\n return false;\r\n }\r\n },\r\n height: 0,\r\n /**数据为空的显示 */\r\n emptyText: {\r\n type: String,\r\n default() {\r\n return \"暂无相关结果\";\r\n },\r\n },\r\n /**判断多选框是否可以勾选*/\r\n selectable: {\r\n type: Function,\r\n default() {\r\n return (row, index) => {\r\n return true;\r\n };\r\n },\r\n },\r\n },\r\n watch: {\r\n radioSelect(n) {\r\n this.$emit(\"radio-change\", this.data[n]);\r\n },\r\n pageset: {\r\n deep: true,\r\n handler(n) {\r\n this.currentPage = n.pageNum;\r\n },\r\n },\r\n },\r\n components:{\r\n slotItem:{\r\n props:['slots','row','index'],\r\n render(h){\r\n let vnode = this.slots({\r\n row:this.row,\r\n index:this.index\r\n })\r\n return h('div',vnode)\r\n }\r\n }\r\n },\r\n data() {\r\n return {\r\n currentPage: 1,\r\n };\r\n },\r\n methods: {\r\n // 多选派发事件selection-change\r\n selectionChange(val) {\r\n this.isSelectAll = val.length == this.data.length;\r\n this.$emit(\"selection-change\", val);\r\n },\r\n currentChange(page) {\r\n this.currentPage = page;\r\n this.$emit(\"page-change\", {\r\n page: page,\r\n });\r\n },\r\n sizeChange(pageSize) {\r\n this.$emit(\"page-change\", {\r\n pageSize: pageSize,\r\n });\r\n },\r\n currentChange(page) {\r\n this.currentPage = page;\r\n this.$emit(\"page-change\", {\r\n page: page,\r\n });\r\n },\r\n // 合计\r\n getSummaries(params) {\r\n let { data } = params;\r\n if (\"{}\" != JSON.stringify(this.summaryData)) {\r\n data = [this.summaryData];\r\n }\r\n let sums = [];\r\n sums[0] = \"合计\";\r\n let cols = JSON.parse(JSON.stringify(this.settings.summaryCol));\r\n let i = cols.length;\r\n while (i--) {\r\n // 计算当前列的prop字段\r\n let index = cols[i];\r\n if (this.settings.showIndex) {\r\n index -= 1;\r\n }\r\n if (this.settings.showCheckbox) {\r\n index -= 1;\r\n }\r\n if (this.settings.showRadio) {\r\n index -= 1;\r\n }\r\n let prop = this.cols[index].prop;\r\n const values = data.map((item) => Number(item[prop]));\r\n if (!values.every((value) => isNaN(value))) {\r\n sums[cols[i]] = values.reduce((prev, curr) => {\r\n const value = Number(curr);\r\n if (!isNaN(value)) {\r\n return prev + curr;\r\n } else {\r\n return prev;\r\n }\r\n }, 0);\r\n sums[cols[i]];\r\n }\r\n }\r\n\r\n return sums;\r\n },\r\n checkAllChange(val) {\r\n if (val) {\r\n this.$refs.table.toggleAllSelection();\r\n } else {\r\n this.$refs.table.clearSelection();\r\n }\r\n },\r\n //自定义表头斑马线\r\n setRowClassName({ row, rowIndex }) {\r\n let index = rowIndex;\r\n if (index % 2 == 0) {\r\n return \"warning-row\";\r\n }\r\n },\r\n },\r\n created() {\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n/deep/.dymic-table .el-table .el-table__body td p{\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n/deep/.dymic-table .el-table--enable-row-transition .el-table__body td{\r\n border:none;\r\n}\r\n.dymic-table .el-table {\r\n border-radius: 6px;\r\n}\r\n/deep/ .el-table{\r\n .el-table__header-wrapper thead tr th:nth-child(-n+2){\r\n .cell{\r\n width: max-content;\r\n }\r\n \r\n }\r\n}\r\n</style>\r\n"]}]}
|
