package.json

 {
   "name": "@package/lwc-ui-components",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "private": false,
   "license": "UNLICENSED",
   "scripts": {
@@ -104,7 +104,7 @@
     "validate-commit-msg": "^2.14.0",
     "vue-loader": "^15.9.3",
     "vue-template-compiler": "^2.6.11",
-    "vxe-table": "^3.2.17",
+    "vxe-table": "^3.4.12",
     "vxe-table-plugin-element": "^1.11.2",
     "webpack": "4.44.2",
     "webpack-cli": "3.0.8",

src/plugins/vxe-table/renderer/filter/components/fillter-input.vue

+<template>
+	<div class="filter-box" @click="closePanel" :style="{width: '220px'}">
+		<!-- 排序 -->
+		<ul class="border-b border-color-primary p-0" v-show="complexConfig.sortable">
+			<li class="p-2 cursor-pointer hover:bg-gray-200" @click.stop="sortTable('asc')">
+			  <span class="el-icon-sort-up"></span>
+			  <span :class="{'text-theme-primary': complexConfig.option.data[0].order === 'asc'}">升序排列</span>
+			</li>
+			<li class="p-2 cursor-pointer hover:bg-gray-200" @click.stop="sortTable('desc')">
+			  <span class="el-icon-sort-down"></span>
+			  <span :class="{'text-theme-primary': complexConfig.option.data[0].order === 'desc'}">降序排列</span>
+			</li>
+			<li class="p-2 cursor-pointer hover:bg-gray-200" @click.stop="sortTable('')">
+			  <span class="el-icon-sort-down"></span>
+			  <span :class="{'text-theme-primary': complexConfig.option.data[0].order === ''}">无序</span>
+			</li>
+		</ul>
+		<!-- 多条搜索 -->
+		<ul v-if="complexConfig.multiple">
+			<li v-for="(item, index) in complexConfig.option.data" :key="index" class="pb-2 border-b border-color-primary">
+				<div class="filters-multiple-li relative p-2 cursor-pointer">
+					<span v-show="index > 0">
+						<el-checkbox v-model="item.and"></el-checkbox>
+						<span class="text-sm text-color-secondary">{{item.and ? "同时满足" : "或者满足"}}</span>
+					</span>
+					<span v-show="index == 0" class="text-sm text-color-secondary">{{complexConfig.title}}</span>
+					<!-- <el-link type="primary" :underline="false" class="filters-li-tag-right">{{ item.conditionLabel }}</el-link> -->
+					<el-dropdown @command="selectDropDown($event, true, index)" placement="bottom" class="ml-2 filters-li-tag-right">
+						<el-button  type="text">
+							{{ item.conditionLabel }}<i class="el-icon-arrow-down el-icon--right"></i>
+						</el-button>
+						<el-dropdown-menu slot="dropdown" class="vxe-table--ignore-clear vxe-cell--filter">
+						  <el-dropdown-item
+							:command="drop.value"
+							v-for="(drop, dropIndex) in complexConfig.caseGroups"
+							:key="dropIndex"
+							:class="{'text-theme-primary': drop.value === item.condition}"
+							:divided="drop.divided">
+							{{drop.label}}
+							</el-dropdown-item>
+						</el-dropdown-menu>
+					</el-dropdown>
+					<span class="el-icon-remove filters-li-icon-right" @click.stop="removeFilters(index)"></span>
+					<!-- <el-tag class="ml-2 filters-li-tag-right" @click.stop="item.conditionPanel = !item.conditionPanel">
+						{{ item.conditionLabel }}
+						<i class="el-icon-caret-right"></i>
+					</el-tag>
+					<span class="el-icon-remove filters-li-icon-right" @click.stop="removeFilters(index)"></span>
+					<div class="filters-panel filters-multiple-panel block absolute" v-show="item.conditionPanel">
+						<ul class="my-fe-child-menu-group-list" v-for="(cList, gIndex) in complexConfig.caseGroups" :key="gIndex">
+							<li v-for="(cItem, cIndex) in cList" :key="cIndex" class="p-2 cursor-pointer hover:bg-gray-200 overflow-ellipsis whitespace-nowrap" @click.stop="selectFiltersCondition(cItem, true, index)">
+							<span :class="{'text-theme-primary': cItem.value === item.condition}">{{ cItem.label }}</span>
+							</li>
+						</ul>
+					</div> -->
+				</div>
+				<div class="px-2" >
+					<el-input v-model="item.value" size="small" @input="changeOptionEvent" v-if="complexConfig.type === 'input'"></el-input>
+					<el-date-picker
+						v-else
+						:style="{width: '100%'}"
+						:value="item.value"
+						:type="complexConfig.type"
+						placeholder="选择日期"
+						:value-format="complexConfig.format"
+						popper-class="vxe-table--ignore-clear vxe-cell--filter"
+						@input="changeDateOptionEvent($event, index)"
+						>
+					</el-date-picker>
+				</div>
+			</li>
+			<li class="px-2"><el-button type="text" icon="el-icon-plus" @click.stop="addFilters">筛选条件</el-button></li>
+		</ul>
+		<!-- 单条搜索 -->
+		<div v-if="!complexConfig.multiple">
+			<!-- 筛选条件搜索 -->
+			<ul class="p-0" v-show="complexConfig.condition">
+				<li class="filters-li relative px-2 pt-2">
+				  <i class="el-icon-s-promotion"></i>
+				  <span class="text-sm text-color-secondary">{{complexConfig.title}}</span>
+				  <!-- <span>筛选条件：<el-tag>{{ complexConfig.option.data[0].conditionLabel }}</el-tag></span> -->
+				  <!-- <i class="el-icon-caret-right filters-li-icon-right"></i> -->
+				  <el-dropdown @command="selectDropDown($event)" placement="bottom" class="ml-2 filters-li-tag-right-0">
+					<el-button  type="text">
+						{{ complexConfig.option.data[0].conditionLabel }}<i class="el-icon-arrow-down el-icon--right"></i>
+					</el-button>
+					<el-dropdown-menu slot="dropdown" class="vxe-table--ignore-clear vxe-cell--filter">
+					  <el-dropdown-item
+						:command="drop.value"
+						v-for="(drop, dropIndex) in complexConfig.caseGroups"
+						:key="dropIndex"
+						:class="{'text-theme-primary': complexConfig.option.data[0].condition === drop.value}"
+						:divided="drop.divided">
+						{{drop.label}}
+						</el-dropdown-item>
+					</el-dropdown-menu>
+				</el-dropdown>
+				  <!-- <div class="filters-panel absolute">
+					<ul class="my-fe-child-menu-group-list" v-for="(cList, gIndex) in complexConfig.caseGroups" :key="gIndex">
+					  <li v-for="(cItem, cIndex) in cList" :key="cIndex" class="p-2 cursor-pointer hover:bg-gray-200 overflow-ellipsis whitespace-nowrap" @click.stop="selectFiltersCondition(cItem)">
+						<span :class="{'text-theme-primary': cItem.value === complexConfig.option.data[0].condition}">{{ cItem.label }}</span>
+					  </li>
+					</ul>
+				  </div> -->
+				</li>
+			</ul>
+			<div class="p-2">
+				<el-input type="text" v-model="complexConfig.option.data[0].value" placeholder="支持回车筛选" @input="changeOptionEvent" @change="searchEvents" v-if="complexConfig.type === 'input'"></el-input>
+				<el-date-picker
+					v-else
+					class="w-full"
+					:value="complexConfig.option.data[0].value"
+					:type="complexConfig.type"
+					placeholder="选择日期"
+					:value-format="complexConfig.format"
+					popper-class="vxe-table--ignore-clear vxe-cell--filter"
+					@input="changeDateOptionEvent">
+				</el-date-picker>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { reactive, onUnmounted } from "@vue/composition-api";
+import XEUtils from "xe-utils";
+export default {
+	props: {
+		params: Object,
+		filterConfig: {
+			type: Object,
+			default: null
+		},
+	},
+	setup(props) {
+		let numberGroups = [
+			{ value: 'equal', label: '等于' },
+			{ value: 'ne', label: '不等于' },
+			{ value: 'greater', label: '大于', divided: true },
+			{ value: 'ge', label: '大于或等于' },
+			{ value: 'less', label: '小于' },
+			{ value: 'le', label: '小于或等于' },
+		]
+		let dateGroups = [
+			...numberGroups,
+			{ value: 'include', label: '包含', divided: true },
+			{ value: 'ex', label: '不包含' }
+		]
+		// 默认配置
+		const complexConfig = reactive({
+			title: null,
+			option: null,
+			multiple: false,
+			sortable: false,
+			condition: false,
+			type: "input",
+			format: "yyyy-MM-dd",
+			caseGroups: [
+				{ value: 'equal', label: '等于' },
+				{ value: 'ne', label: '不等于', divided: true },
+				{ value: 'include', label: '包含' },
+				{ value: 'ex', label: '不包含' },
+				{ value: 'start', label: '以...开头', divided: true },
+				{ value: 'end', label: '以…结尾' }
+			]
+		})
+		// 加载初始化筛选器
+		const load = () => {
+			const { params, filterConfig } = props
+
+			let defaultData = [{
+				conditionPanel: false,
+				condition: "include",
+				conditionLabel: "包含",
+				value: "",
+				and: true,
+				order: ""
+			}]
+			if (params) {
+				const { column } = params
+				const option = column.filters[0]
+				complexConfig.option = option
+				complexConfig.title = column.title
+				let { type = "string", ...other } = filterConfig || {}
+				Object.assign(complexConfig, other)
+				if(complexConfig.multiple) {
+					complexConfig.option.data = complexConfig.option.data || defaultData
+				} else {
+					complexConfig.option.data = complexConfig.option.data || defaultData
+				}
+
+				if(type === 'number') {
+					complexConfig.type = 'input'
+					complexConfig.caseGroups = numberGroups
+
+				}
+				if(type === 'date' || type === 'datetime') {
+					complexConfig.type = type
+					complexConfig.caseGroups = dateGroups
+					if(type === 'datetime') complexConfig.format = "yyyy-MM-dd HH:mm:ss"
+				}
+				if(type != 'string') {
+					complexConfig.condition = "equal"
+					complexConfig.conditionLabel = "等于"
+				}
+			}
+		}
+		const sortTable = (type) => {
+			const { $table, column } = props.params
+			const { treeConfig } = $table
+			let finalList = []
+			complexConfig.option.data[0].order = type
+			if(treeConfig?.transform) {
+				if(type) {
+					const { tableData } = $table.getTableData()
+					tableData.map(item => {
+						finalList.push(item)
+						finalList = finalList.concat(XEUtils.orderBy(item.children, [[column.property, type]]))
+					})
+					$table.afterFullData = finalList
+					$table.updateAfterDataIndex()
+					$table.handleTableData()
+				} else {
+					$table.handleLoadDefaults()
+				}
+			}
+		}
+		// 输入框按下记录输入值
+		const changeOptionEvent = () => {
+			const { params } = props
+			const { option } = complexConfig
+			if (params && option) {
+				const { $panel } = params
+				const checked = !!option.data
+				console.log(checked, option)
+				$panel.changeOption({}, checked, option)
+			}
+		}
+		const changeDateOptionEvent = (val, index) => {
+			const { params } = props
+			const { option } = complexConfig
+			if (params && option) {
+				const { $panel } = params
+				option.data[index || 0].value = val
+				const checked = !!option.data
+
+				$panel.changeOption({}, checked, option)
+			}
+		}
+		// 输入框搜索
+		const searchEvents = ({ $event }) => {
+			const { params } = props
+			if (params) {
+				const { $panel } = params
+				$panel.confirmFilter($event)
+			}
+		}
+
+		// 重置筛选条件
+		const resetFilterEvent = () => {
+			const { params } = props
+			if (params) {
+				const { $panel } = params
+				$panel.resetFilter()
+			}
+		}
+		const selectDropDown = (val, multiple, index) => {
+			let item = complexConfig.caseGroups.find(v => { return v.value === val})
+			selectFiltersCondition(item, multiple, index)
+		}
+		// 选择筛选条件公式
+		const selectFiltersCondition = (cItem, multiple, index) => {
+			if(multiple) {
+				complexConfig.option.data[index].condition = cItem.value
+				complexConfig.option.data[index].conditionLabel = cItem.label
+				complexConfig.option.data[index].conditionPanel = false
+			} else {
+				complexConfig.option.data[0].conditionLabel = cItem.label
+				complexConfig.option.data[0].condition = cItem.value
+			}
+		}
+
+		// 添加筛选条件
+		const addFilters = () => {
+			complexConfig.option.data.push({
+				conditionPanel: false,
+				condition: "equal",
+				conditionLabel: "等于",
+				value: "",
+				and: true
+			})
+		}
+
+		// 移除筛选条件
+		const removeFilters = (index) => {
+			complexConfig.option.data.splice(index, 1)
+		}
+
+		// 全局监听关闭面板
+		const closePanel = () => {
+			if(complexConfig.multiple && (complexConfig.option.data?.length > 0)) {
+				complexConfig.option.data = complexConfig.option.data.map(item => {
+					item.conditionPanel = false
+					return item
+				})
+			}
+		}
+		load()
+
+		onUnmounted(() => {
+			closePanel()
+		})
+		return {
+			complexConfig,
+			changeOptionEvent,
+			changeDateOptionEvent,
+			searchEvents,
+			resetFilterEvent,
+			selectFiltersCondition,
+			selectDropDown,
+			addFilters,
+			removeFilters,
+			closePanel,
+			sortTable
+		}
+	}
+}
+</script>
+<style>
+	.filter-box {
+		width: 200px;
+	}
+	.filter-box .filters-li-tag-right {
+		position: absolute;
+		right: 30px;
+  		top: 2px;
+	}
+	.filter-box .filters-li-tag-right-0 {
+		position: absolute;
+		right: 10px;
+  		top: 2px;
+	}
+	.filter-box .filters-li-icon-right {
+		position: absolute;
+		right: 10px;
+  		top: 10px;
+	}
+	.filter-box .filters-li:hover .filters-panel {
+		display: block;
+	}
+	.filter-box .filters-panel {
+		display: none;
+		width: 120px;
+		right:  -120px;
+		top: 0;
+		background-color: #fff;
+		border: 1px solid #DADCE0;
+		box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
+	}
+	.filter-box .filters-multiple-panel {
+		display: block;
+	}
+
+</style>

src/plugins/vxe-table/renderer/filter/input.js

+import FilterInput from "./components/fillter-input.vue"
+const XEUtils = require('xe-utils')
+export default {
+	// showFilterFooter: false,
+	renderFilter(h, renderOpts, params) {
+		const { props = {} } = renderOpts
+		return [
+			<FilterInput key={params.columnIndex} params={ params } { ...{ props } }></FilterInput>
+		  ]
+	},
+	// 重置数据方法
+	filterResetMethod ({ options }) {
+		options.forEach((option) => {
+			option.data = ""
+		})
+	},
+	// 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
+	filterRecoverMethod ({ option }) {
+		option.data = ""
+	},
+	// 筛选方法
+	filterMethod ({ option, row, column }) {
+		const { data } = option
+		const cellValue = XEUtils.get(row, column.property)
+		if (cellValue) {
+			if(XEUtils.isArray(data)) {
+				let filterState = true
+				data.map(item => {
+					let filterValue = false
+					switch(item.condition) {
+						case "equal":
+							filterValue = cellValue === item.value
+							break;
+						case "ne":
+							filterValue = cellValue != item.value
+							break;
+						case "greater":
+							filterValue = cellValue > item.value
+							break;
+						case "ge":
+							filterValue = cellValue >= item.value
+							break;
+						case "less":
+							filterValue = cellValue < item.value
+							break;
+						case "le":
+							filterValue = cellValue <= item.value
+							break;
+						case "include":
+							filterValue = cellValue.indexOf(item.value) >= 0
+							break;
+						case "ex":
+							filterValue = cellValue.indexOf(item.value) < 0
+							break;
+						case "start":
+							filterValue = cellValue.indexOf(item.value) === 0
+							// filterValue = cellValue.substr(0, item.value.length) == item.value
+							break;
+						case "end":
+							filterValue = cellValue.substr(cellValue.length - item.value.length, item.value.length) == item.value
+							break;
+					}
+					filterState = item.and ? (filterState && filterValue) : (filterState || filterValue)
+				})
+				return filterState
+			} else {
+				return cellValue.indexOf((data + "")) > -1
+			}
+
+		}
+		return false
+	}
+};

src/plugins/vxe-table/renderer/index.js

@@ -6,6 +6,7 @@ import ToolbarElButton from './toolbar/el-button';
 import ToolbarElDropdown from './toolbar/el-dropdown';
 
 import ElHoc from './el-hoc';
+import FilterModal from './filter/input';
 
 export {
 	CheckboxGroupBtn,
@@ -13,4 +14,5 @@ export {
 	ToolbarElDropdown,
 
 	ElHoc,
+	FilterModal
 }

src/stories/changelog.stories.mdx

@@ -7,6 +7,18 @@
 `优化`
 `新特性`
 `非兼容性更新`
+---
+### **v0.1.42 20211230**
+
+#### 新增
+
+- 新增 vxe-table导出功能,筛选功能
+
+#### 修复
+
+- 修复 vxe-table传值data时，页码搜索错误
+- 修复 lwc-basic-tag无默认值时显示空标签问题
+
 ---
 ### **v0.1.41 20211122**
 

src/stories/table/basic/index.stories.js

 import LwcTableBasic from "./src/index.js";
 import CardTpl from "../../../__mock__/template/order-card.vue";
+import XEUtils from "xe-utils";
 export default {
 	title: "Design System/Table/列表表格",
 	component: LwcTableBasic,
@@ -321,7 +322,7 @@ DefaultList.args = {
 			{ field: "id", title: "ID", visible: false },
 			{ field: "name", title: "Name", editRender: { name: "input" } },
 			{ field: "nickname", title: "Nickname", editRender: { name: "input" } },
-			{ field: "role", title: "Role", editRender: { name: "input" } },
+			{ field: "role", title: "Role", sortable: true, editRender: { name: "input" } },
 			{
 				field: "address",
 				title: "Address",
@@ -744,4 +745,613 @@ const DefaultFormTemplate = (args, { argTypes }) => ({
 
 export const DefaultForm = DefaultFormTemplate.bind({});
 DefaultForm.storyName = "表单表格";
-DefaultForm.args = {};
+DefaultForm.args = {}
+
+let treeList = [
+	{
+		"company_code":"lwc",
+		"company_name":"立威云",
+		"children":[
+			{
+				"goods_name":"五粮液-绵柔尖庄",
+				"barcode":"1122121234214",
+				"goods_code":"201001",
+				"qty":10
+			},
+			{
+				"goods_name":"维他 低糖柠檬茶250ml*16盒",
+				"barcode":"202107050000",
+				"goods_code":"20210706",
+				"qty":23
+			},
+			{
+				"goods_name":"轻奢双人床",
+				"barcode":"2222222222222",
+				"goods_code":"151515",
+				"qty":17
+			},
+			{
+				"goods_name":"小飞酒",
+				"barcode":"7575757575",
+				"goods_code":"101002",
+				"qty":52
+			},
+			{
+				"goods_name":"小飞酒",
+				"barcode":"12121212121",
+				"goods_code":"101002",
+				"qty":34
+			},
+			{
+				"goods_name":"飞天茅台",
+				"barcode":"8563214236549",
+				"goods_code":"0236514485632145856324",
+				"qty":-2
+			},
+			{
+				"goods_name":"三星超薄全面屏电视",
+				"barcode":"vmall-3-1-3-2",
+				"goods_code":"vmall-3-1-3-2",
+				"qty":6
+			},
+			{
+				"goods_name":"维他 低糖柠檬茶250ml*16盒",
+				"barcode":"202107050001",
+				"goods_code":"20210706",
+				"qty":5
+			},
+			{
+				"goods_name":"卫龙小面筋",
+				"barcode":"1254126321542",
+				"goods_code":"15145105",
+				"qty":155
+			},
+			{
+				"goods_name":"华为p40",
+				"barcode":"555555555555",
+				"goods_code":"11111",
+				"qty":-16
+			},
+			{
+				"goods_name":"华为p40",
+				"barcode":"1111111111116",
+				"goods_code":"11111",
+				"qty":11
+			},
+			{
+				"goods_name":"#92汽油",
+				"barcode":"2010110100000",
+				"goods_code":"900101",
+				"qty":-0.176
+			},
+			{
+				"goods_name":"安慕希",
+				"barcode":"9998855541223",
+				"goods_code":"111222222",
+				"qty":408
+			},
+			{
+				"goods_name":"清风面巾纸200抽*3层/包",
+				"barcode":"6922266445033",
+				"goods_code":"20808",
+				"qty":154
+			},
+			{
+				"goods_name":"CK Jeans 2021秋冬款男装时尚全棉方型LOGO绣标圆领长袖卫衣",
+				"barcode":"1002545317819",
+				"goods_code":"J318043",
+				"qty":1
+			},
+			{
+				"goods_name":"蒙牛 纯牛奶 PURE MILK 250ml*16 航天定制装",
+				"barcode":"6907992513751",
+				"goods_code":"htmilk",
+				"qty":-1
+			},
+			{
+				"goods_name":"中包装",
+				"barcode":"102123456789",
+				"goods_code":"102",
+				"qty":100
+			},
+			{
+				"goods_name":"维他 低糖柠檬茶250ml*16盒",
+				"barcode":"2010000100004",
+				"goods_code":"100001",
+				"qty":-3
+			},
+			{
+				"goods_name":"CK Jeans 2021秋冬款男装时尚全棉方型LOGO绣标圆领长袖卫衣",
+				"barcode":"1002545317826",
+				"goods_code":"J318043",
+				"qty":1
+			}
+		]
+	}
+]
+export const TreeTable = Template.bind({});
+TreeTable.storyName = "树形表格";
+TreeTable.args = {
+	gridConfig: {
+        data: treeList,
+        resizable: true,
+        exportConfig: {},
+        autoResize: true,
+        treeConfig: {
+            expandAll: true,
+            indent: 30
+        },
+        columns: [
+            { field: "company_code", title: "公司编号", minWidth: "80px", treeNode: true },
+            { field: "company_name", title: "公司名称", minWidth: "100px" },
+            { field: "goods_name", title: "商品名称", minWidth: "150px", showOverflow: true },
+            { field: "goods_code", title: "商品货号", minWidth: "100px" },
+            { field: "barcode", title: "商品条码", minWidth: "120px" },
+            { field: "qty", title: "库存数量", sortable: true, minWidth: "100px" }
+        ],
+        toolbarConfig: {
+            toolbar: {
+                refresh: true,
+                export: true
+            }
+        },
+		sortConfig: {
+			sortMethod: ({ data, column, property, order }) => {
+				// XEUtils.flatten(data, property)
+				console.log(data, column, property, order)
+			}
+		},
+        showFooter: true,
+        footerMethod: ({ columns, data }) => {
+            let list = []
+            data.forEach(company => {
+                list.push(company.children)
+            })
+            list = XEUtils.flatten(list)
+            const footerData = [
+                columns.map((column, _columnIndex) => {
+                    if (_columnIndex === 0) {
+                        return '合计'
+                    }
+                    if (["barcode"].includes(column.property)) {
+                        return `商品数：${list.length}`
+                    }
+                    if (["qty"].includes(column.property)) {
+                        return `库存数：${XEUtils.sum(list, "qty")}`
+                    }
+                    return null
+                })
+            ]
+            return footerData
+        }
+    }
+};
+let treeList1 = [
+	{
+		"goods_name":"五粮液-绵柔尖庄",
+		"company_code":"lwc",
+		"barcode":"1122121234214",
+		"goods_code":"201001",
+		"company_name":"立威云",
+		"qty":10,
+		"status": "DRAFT",
+		"date": "2021-10-20",
+		"datetime": "2021-10-20 00:12:12",
+	},
+	{
+		"goods_name":"五粮液-绵柔尖庄",
+		"company_code":"abc",
+		"barcode":"1122121234214",
+		"goods_code":"201001",
+		"company_name":"ABC",
+		"qty":10,
+		"status": "DRAFT",
+		"date": "2021-10-22",
+		"datetime": "2021-10-20 02:12:12"
+	},
+	{
+		"goods_name":"维他 低糖柠檬茶250ml*16盒",
+		"company_code":"lwc",
+		"barcode":"202107050000",
+		"goods_code":"20210706",
+		"company_name":"立威云",
+		"qty":23,
+		"status": "DONE",
+		"date": "2021-10-25",
+		"datetime": "2021-10-20 10:12:12",
+	},
+	{
+		"goods_name":"轻奢双人床",
+		"company_code":"lwc",
+		"barcode":"2222222222222",
+		"goods_code":"151515",
+		"company_name":"立威云",
+		"qty":17,
+		"status": "DONE",
+		"date": "2021-10-25",
+		"datetime": "2021-10-20 08:12:12",
+	},
+	{
+		"goods_name":"小飞酒",
+		"company_code":"lwc",
+		"barcode":"7575757575",
+		"goods_code":"101002",
+		"company_name":"立威云",
+		"qty":52,
+		"status": "DONE",
+		"date": "2021-11-25",
+		"datetime": "2021-11-20 00:12:12",
+	},
+	{
+		"goods_name":"小飞酒",
+		"company_code":"lwc",
+		"barcode":"12121212121",
+		"goods_code":"101002",
+		"company_name":"立威云",
+		"qty":34,
+		"status": "APPROVE",
+		"date": "2021-10-25",
+		"datetime": "2021-11-02 00:12:12",
+	},
+	{
+		"goods_name":"飞天茅台",
+		"company_code":"lwc",
+		"barcode":"8563214236549",
+		"goods_code":"0236514485632145856324",
+		"company_name":"立威云",
+		"qty":-2,
+		"status": "APPROVE",
+		"date": "2021-10-25",
+		"datetime": "2021-09-20 00:12:12",
+	},
+	{
+		"goods_name":"三星超薄全面屏电视",
+		"company_code":"lwc",
+		"barcode":"vmall-3-1-3-2",
+		"goods_code":"vmall-3-1-3-2",
+		"company_name":"立威云",
+		"qty":6,
+		"status": "APPROVE",
+		"date": "2021-08-25",
+		"datetime": "2021-08-20 00:12:12",
+	},
+	{
+		"goods_name":"维他 低糖柠檬茶250ml*16盒",
+		"company_code":"lwc",
+		"barcode":"202107050001",
+		"goods_code":"20210706",
+		"company_name":"立威云",
+		"qty":5,
+		"status": "APPROVE",
+		"date": "2021-10-25",
+		"datetime": "2021-08-20 10:12:12",
+	},
+	{
+		"goods_name":"卫龙小面筋",
+		"company_code":"lwc",
+		"barcode":"1254126321542",
+		"goods_code":"15145105",
+		"company_name":"立威云",
+		"qty":155,
+		"status": "DONE",
+		"date": "2021-10-25",
+		"datetime": "2021-10-29 00:12:12",
+	},
+	{
+		"goods_name":"华为p40",
+		"company_code":"lwc",
+		"barcode":"555555555555",
+		"goods_code":"11111",
+		"company_name":"立威云",
+		"qty":-16,
+		"status": "DONE",
+		"date": "2021-09-05",
+		"datetime": "2021-11-29 00:12:12",
+	},
+	{
+		"goods_name":"华为p40",
+		"company_code":"lwc",
+		"barcode":"1111111111116",
+		"goods_code":"11111",
+		"company_name":"立威云",
+		"qty":11,
+		"status": "DONE",
+		"date": "2021-09-05",
+		"datetime": "2021-11-29 00:12:12",
+	},
+	{
+		"goods_name":"#92汽油",
+		"company_code":"lwc",
+		"barcode":"2010110100000",
+		"goods_code":"900101",
+		"company_name":"立威云",
+		"qty":-0.176,
+		"status": "DRAFT",
+		"date": "2021-09-15",
+		"datetime": "2021-11-29 10:12:12",
+	},
+	{
+		"goods_name":"安慕希",
+		"company_code":"lwc",
+		"barcode":"9998855541223",
+		"goods_code":"111222222",
+		"company_name":"立威云",
+		"qty":408,
+		"status": "DONE",
+		"date": "2021-09-05",
+		"datetime": "2021-11-29 02:12:12",
+	},
+	{
+		"goods_name":"清风面巾纸200抽*3层/包",
+		"company_code":"lwc",
+		"barcode":"6922266445033",
+		"goods_code":"20808",
+		"company_name":"立威云",
+		"qty":154,
+		"status": "DONE",
+		"date": "2021-09-05",
+		"datetime": "2021-11-29 04:12:12",
+	},
+	{
+		"goods_name":"CK Jeans 2021秋冬款男装时尚全棉方型LOGO绣标圆领长袖卫衣",
+		"company_code":"lwc",
+		"barcode":"1002545317819",
+		"goods_code":"J318043",
+		"company_name":"立威云",
+		"qty":1,
+		"status": "DONE",
+		"date": "2021-09-05",
+		"datetime": "2021-11-29 14:12:12",
+	},
+	{
+		"goods_name":"蒙牛 纯牛奶 PURE MILK 250ml*16 航天定制装",
+		"company_code":"lwc",
+		"barcode":"6907992513751",
+		"goods_code":"htmilk",
+		"company_name":"立威云",
+		"qty":-1,
+		"status": "DONE",
+		"date": "2021-09-05",
+		"datetime": "2021-11-29 01:12:12",
+	},
+	{
+		"goods_name":"中包装",
+		"company_code":"lwc",
+		"barcode":"102123456789",
+		"goods_code":"102",
+		"company_name":"立威云",
+		"qty":100,
+		"status": "DONE",
+		"date": "2021-09-05",
+		"datetime": "2021-11-29 09:12:12",
+	},
+	{
+		"goods_name":"维他 低糖柠檬茶250ml*16盒",
+		"company_code":"lwc",
+		"barcode":"2010000100004",
+		"goods_code":"100001",
+		"company_name":"立威云",
+		"qty":-3,
+		"status": "DRAFT",
+		"date": "2021-07-11",
+		"datetime": "2021-07-29 00:12:12",
+	},
+	{
+		"goods_name":"CK Jeans 2021秋冬款男装时尚全棉方型LOGO绣标圆领长袖卫衣",
+		"company_code":"lwc",
+		"barcode":"1002545317826",
+		"goods_code":"J318043",
+		"company_name":"立威云",
+		"qty":1,
+		"status": "DRAFT",
+		"date": "2021-07-12",
+		"datetime": "2021-11-19 00:12:12",
+	}
+]
+
+export const TreeTable1 = Template.bind({});
+TreeTable1.storyName = "树形表格(代理）";
+TreeTable1.args = {
+	gridConfig: {
+		data: [],
+		loadData: () => {
+			let finalList = []
+			let companyParams = XEUtils.groupBy(treeList1, "company_code")
+			Object.keys(companyParams).map((item, index) => {
+				let childrenList = companyParams[item]
+				finalList.push({
+					id: `companyId_${index}`,
+					code: item,
+					name: childrenList[0].company_name
+				})
+				childrenList.map((child, childIndex) => {
+					finalList.push({
+						...child,
+						id: `companyId_${index}_${childIndex}`,
+						parentId: `companyId_${index}`
+					})
+				})
+			})
+			return finalList
+		},
+        resizable: true,
+        exportConfig: {},
+        autoResize: true,
+        showFilterFooter: true,
+        treeConfig: {
+            expandAll: true,
+            transform: true,
+			rowKey: 'id',
+			parentKey: 'parentId',
+            indent: 30
+        },
+        columns: [
+            { field: "code", title: "公司编号", minWidth: "80px", treeNode: true },
+            { field: "name", title: "公司名称", minWidth: "100px", filters: [{ data: null }], filterRender: {
+				name: "FilterModal"
+			}  },
+            { field: "goods_name", title: "商品名称", minWidth: "150px", showOverflow: true, filters: [{ data: null }], filterRender: {
+				name: "FilterModal"
+			} },
+            { field: "goods_code", title: "商品货号", minWidth: "100px", filters: [{ data: null }], filterRender: {
+				name: "FilterModal",
+				props: {
+					filterConfig: {
+						condition: true,
+						// sortable: true
+					}
+				}
+			}  },
+            { field: "barcode", title: "商品条码", minWidth: "120px", filters: [{ data: null }], filterRender: {
+				name: "FilterModal",
+				props: {
+					filterConfig: {
+						multiple: true
+					}
+				}
+			}  },
+            { field: "qty", title: "库存数量", minWidth: "100px", sortable: true, filters: [{ data: null }], filterRender: {
+				name: "FilterModal",
+				props: {
+					filterConfig: {
+						condition: true,
+						type: "number"
+					}
+				}
+			}   },
+            { field: "status", title: "状态", minWidth: "100px", cellRender: {
+				name: "ElHoc",
+				hocName: "lwc-tags-basic",
+				props: {
+					options: [
+						{ label: "草稿", value: "DRAFT", type: "info" },
+						{ label: "审核中", value: "APPROVE", type: "warning" },
+						{ label: "已完成", value: "DONE", type: "success" },
+					]
+				}
+			}, filters: [
+				{ label: "草稿", value: "DRAFT", type: "info" },
+				{ label: "审核中", value: "APPROVE", type: "warning" },
+				{ label: "已完成", value: "DONE", type: "success" },
+			] },
+            { field: "status", title: "状态", minWidth: "100px", cellRender: {
+				name: "ElHoc",
+				hocName: "lwc-tags-basic",
+				props: {
+					options: [
+						{ label: "草稿", value: "DRAFT", type: "info" },
+						{ label: "审核中", value: "APPROVE", type: "warning" },
+						{ label: "已完成", value: "DONE", type: "success" },
+					]
+				}
+			}, filters: [{ data: null }], filterRender: {
+				name: "ElSelect",
+				options: [
+					{ label: "草稿", value: "DRAFT", type: "info" },
+					{ label: "审核中", value: "APPROVE", type: "warning" },
+					{ label: "已完成", value: "DONE", type: "success" },
+				]
+			} },
+            { field: "date", title: "日期", minWidth: "130px", filters: [{ data: null }], filterRender: {
+				name: "ElDatePicker",
+				props: {
+					"clearable" : false,
+					"format" : "yyyy-MM-dd",
+					"type" : "date",
+					"valueFormat" : "yyyy-MM-dd"
+				}
+			}   },
+            { field: "datetime", title: "日期", minWidth: "130px", filters: [{ data: null }], filterRender: {
+				name: "FilterModal",
+				props: {
+					filterConfig: {
+						multiple: true,
+						condition: true,
+						type: "datetime"
+					}
+				}
+			}   }
+        ],
+        toolbarConfig: {
+            toolbar: {
+                refresh: true,
+                export: true
+            }
+        },
+		// events: {
+		// 	"sort-change": (sortList) => {
+		// 		const { $grid, property, order } = sortList
+		// 		let finalList = []
+		// 		let companyParams = XEUtils.groupBy(treeList1, "company_code")
+		// 		Object.keys(companyParams).map((item, index) => {
+		// 			let childrenList = XEUtils.orderBy(companyParams[item], [[property, order]])
+		// 			finalList.push({
+		// 				id: `companyId_${index}`,
+		// 				code: item,
+		// 				name: childrenList[0].company_name
+		// 			})
+		// 			childrenList.map((child, childIndex) => {
+		// 				finalList.push({
+		// 					...child,
+		// 					id: `companyId_${index}_${childIndex}`,
+		// 					parentId: `companyId_${index}`
+		// 				})
+		// 			})
+		// 		})
+		// 		console.log($grid)
+		// 		// $grid.tableData = finalList
+
+		// 		// $grid.updateData()
+		// 	}
+		// }
+		// proxyConfig: {
+		// 	ajax: {
+		// 		query() {
+		// 			let finalList = []
+		// 			let companyParams = XEUtils.groupBy(treeList1, "company_code")
+		// 			Object.keys(companyParams).map((item, index) => {
+		// 				let childrenList = XEUtils.orderBy(companyParams[item], "qty")
+		// 				finalList.push({
+		// 					id: `companyId_${index}`,
+		// 					code: item,
+		// 					name: childrenList[0].company_name
+		// 				})
+		// 				childrenList.map((child, childIndex) => {
+		// 					finalList.push({
+		// 						...child,
+		// 						id: `companyId_${index}_${childIndex}`,
+		// 						parentId: `companyId_${index}`
+		// 					})
+		// 				})
+		// 			})
+		// 			return finalList
+		// 		}
+		// 	}
+		// },
+        // showFooter: true,
+        // footerMethod: ({ columns, data }) => {
+		// 	console.log(data, "data")
+        //     let list = []
+        //     data.forEach(company => {
+        //         list.push(company.children)
+        //     })
+        //     list = XEUtils.flatten(list)
+		// 	console.log("list", list)
+        //     const footerData = [
+        //         columns.map((column, _columnIndex) => {
+        //             if (_columnIndex === 0) {
+        //                 return '合计'
+        //             }
+        //             if (["barcode"].includes(column.property)) {
+        //                 return `商品数：${list.length}`
+        //             }
+        //             if (["qty"].includes(column.property)) {
+        //                 return `库存数：${XEUtils.sum(list, "qty")}`
+        //             }
+        //             return null
+        //         })
+        //     ]
+        //     return footerData
+        // }
+    }
+};

src/stories/table/basic/src/index.js

@@ -182,8 +182,11 @@ const renderToolbar = (h, toolbarConfig, contentConfig, _vm) => {
 									key: "all"
 								},
 								on: {
-									change: () => {
-										_vm.allTableColumns()
+									change: (val) => {
+										_vm.tableColumns.map(col => {
+											_vm.$set(col, "visible", val)
+										})
+										// _vm.allTableColumns(_vm.isAllColumns)
 									}
 								}
 							}, "全部"),
@@ -287,7 +290,7 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
 			ref: _vm.gridTable,
 			on: {
 				"page-change": ({ currentPage, pageSize, $grid }) => {
-					_vm.pageChange($grid.tablePage.currentPage, $grid.tablePage.pageSize)
+					_vm.pageChange(currentPage, pageSize)
 				},
 				...events
 			},
@@ -380,6 +383,7 @@ export default {
 			this.btnType = "page"
 			if(this.handPage) {
 				this.pagerConfig.currentPage = currentPage
+				this.pagerConfig.pageSize = pageSize
 				this.loadTableData(false)
 			}
 			// this.$set(this.gridConfig.pagerConfig, "currentPage", currentPage)

src/stories/tags/basic/src/index.js

@@ -34,8 +34,7 @@ export default {
 				break;
 			default:
 		}
-
-		return h('el-tag', {
+		return typeof(this.value) == 'undefined' ? "" : h('el-tag', {
 			class: extendType.class,
 			props: {
 				type: type,

yarn.lock

@@ -15257,10 +15257,10 @@ vxe-table-plugin-element@^1.11.2:
   resolved "https://registry.nlark.com/vxe-table-plugin-element/download/vxe-table-plugin-element-1.11.2.tgz#541631d3d39a13a525773da4c6cf4a54722f2f17"
   integrity sha1-VBYx09OaE6Uldz2kxs9KVHIvLxc=
-vxe-table@^3.2.17:
-  version "3.3.12"
-  resolved "https://registry.nlark.com/vxe-table/download/vxe-table-3.3.12.tgz#5f624915e5c0834a3e89caa227db9d36d1d7bd1e"
-  integrity sha1-X2JJFeXAg0o+icqiJ9udNtHXvR4=
+vxe-table@^3.4.12:
+  version "3.4.12"
+  resolved "https://registry.npmmirror.com/vxe-table/download/vxe-table-3.4.12.tgz#5c92de2fd6ec78e1cf6983ff6870b909d3f153e5"
+  integrity sha512-0sPhh1GRA0xV8DtCloaqJ5QJ3vjPkHnfH/bZxu1EuyXVE/AZ+dtvYy8syqPevnsLTW9oL8CNTWOHl6WJUdmsuQ==
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"