CHANGELOG.md

+## [0.1.30](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.29...v0.1.30) (2021-06-09)
+
+
+### Bug Fixes
+
+* 修复 lwc-data-display-detail-header title render 传值问题，优化样式 ([efa69ac](http://git.leadwaycloud.com/package/lwc-ui-components/commits/efa69ac3ed5903e0b4cb8bd6381bd1cb02d24d77))
+* 修复 lwc-table-basic 组件 loading 逻辑，隐藏原生loading，默认加载数据逻辑，调整为手动触发 ([d4423b3](http://git.leadwaycloud.com/package/lwc-ui-components/commits/d4423b38b292cb0d0befa87910e13ceec7eef4c2))
+
+
+### Features
+
+* el-hoc新增events.changeCb返回回调函数 ([c357210](http://git.leadwaycloud.com/package/lwc-ui-components/commits/c3572107dae0d999b2e1c7e08bfc180939ac56a5))
+
+
+
 ## [0.1.29](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.28...v0.1.29) (2021-06-07)
 
 

package-lock.json

 {
 	"name": "@package/lwc-ui-components",
-	"version": "0.1.30",
+	"version": "0.1.31",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

 {
   "name": "@package/lwc-ui-components",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "private": false,
   "license": "UNLICENSED",
   "scripts": {

src/index.js

@@ -43,6 +43,7 @@ import LwcDashboardVmallTaskList from './stories/dashboard/vmall-task-list/index
 import LwcDataDisplayBasicList from './stories/data-display/basic-list/index.js';
 import LwcDataDisplayDescriptions from './stories/data-display/descriptions/index.js';
 import LwcDataDisplayDetailContentItem from './stories/data-display/detail-content-item/index.js';
+import LwcDataDisplayDetailContentItemList from './stories/data-display/detail-content-item-list/index.js';
 import LwcDataDisplayDetailHeader from './stories/data-display/detail-header/index.js';
 import LwcDataDisplayErrorCode from './stories/data-display/error-code/index.js';
 import LwcDataDisplayIconDescription from './stories/data-display/icon-description/index.js';
@@ -73,6 +74,7 @@ import LwcSelectGoods from './stories/select/goods/index.js';
 import LwcTableBasic from './stories/table/basic/index.js';
 import LwcTagsBasic from './stories/tags/basic/index.js';
 import LwcTagsContractStatus from './stories/tags/contract-status/index.js';
+import LwcTagsList from './stories/tags/list/index.js';
 import LwcTagsOrderStatus from './stories/tags/order-status/index.js';
 import LwcTagsPaymentStatus from './stories/tags/payment-status/index.js';
 import LwcTimelineApproveInfo from './stories/timeline/approve-info/index.js';
@@ -126,6 +128,7 @@ const components = [
   LwcDataDisplayBasicList,
   LwcDataDisplayDescriptions,
   LwcDataDisplayDetailContentItem,
+  LwcDataDisplayDetailContentItemList,
   LwcDataDisplayDetailHeader,
   LwcDataDisplayErrorCode,
   LwcDataDisplayIconDescription,
@@ -156,6 +159,7 @@ const components = [
   LwcTableBasic,
   LwcTagsBasic,
   LwcTagsContractStatus,
+  LwcTagsList,
   LwcTagsOrderStatus,
   LwcTagsPaymentStatus,
   LwcTimelineApproveInfo,
@@ -191,7 +195,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.29',
+  version: '0.1.30',
   install,
   LwcBasicButton,
   LwcBasicButtonIcon,
@@ -236,6 +240,7 @@ export default {
   LwcDataDisplayBasicList,
   LwcDataDisplayDescriptions,
   LwcDataDisplayDetailContentItem,
+  LwcDataDisplayDetailContentItemList,
   LwcDataDisplayDetailHeader,
   LwcDataDisplayErrorCode,
   LwcDataDisplayIconDescription,
@@ -266,6 +271,7 @@ export default {
   LwcTableBasic,
   LwcTagsBasic,
   LwcTagsContractStatus,
+  LwcTagsList,
   LwcTagsOrderStatus,
   LwcTagsPaymentStatus,
   LwcTimelineApproveInfo,

src/stories/changelog.stories.mdx

@@ -8,6 +8,26 @@
 `新特性`
 `非兼容性更新`
 
+---
+### **v0.1.31 20210621**
+
+#### 新增
+
+- 新增 `lwc-tags-list` 标签列表组件
+- 新增 `lwc-data-display-detail-content-item-list` 详情内容列表组件
+- 新增 `lwc-select-dialog`、`lwc-select-down-table` `initConfig`属性，支持于type为int类型数据显示
+
+#### Bug修复
+
+- 修复 `lwc-select-dialog`、`lwc-select-down-table` 多选状态默认值不显示错误
+- 修复 `lwc-data-display-descriptions` 组件项 `value=false` 时获取默认值错误
+
+#### 优化
+
+- `lwc-data-display-detail-header` 组件样式优化
+- `lwc-data-display-detail-descriptions` 组件优化 `formatter`，额外返回 data 对象
+- `lwc-select-goods` 组件 `events`，支持合并外部自定义事件
+
 ---
 ### **v0.1.30 20210609**
 

src/stories/data-display/descriptions/src/index.js

@@ -2,13 +2,13 @@ import renderContentItemTitle from '../../../../renders/content-item-title';
 import XEUtils from "xe-utils";
 
 function renderItemContent(h, text, item) {
-	const { name, props, events } = item.renderContent;
+	const { name, props, events = {} } = item.renderContent;
 	return h(
 		name,
 		{
 			props: props,
 			on: {
-				click: events.click
+				...events
 			}
 		},
 		text
@@ -22,14 +22,14 @@ function renderItems(h, _vm, data, list) {
 		if (!i.visible) i.visible = () => true
 
 		if (i.visible()) {
-			let renderText = data === null ? i.value : XEUtils.get(data, i.field) || _vm.emptySymbol
-
+			let renderText = data === null ? i.value : XEUtils.get(data, i.field)
+			if(typeof renderText !== 'boolean' && !renderText) renderText = _vm.emptySymbol
 			// 从原型链上获取formats方法
 			const formats = _vm.$LWC_UI.formats;
 			// 格式化
 			if (i.formatter) {
 				const globalFunc = formats[i.formatter];
-				const formatParams = { cellValue: renderText, column: i };
+				const formatParams = { cellValue: renderText, column: i, row: data };
 				renderText = globalFunc ? globalFunc(formatParams) : _vm.emptySymbol
 			}
 

src/stories/data-display/detail-content-item-list/index.js

+import LwcDataDisplayDetailContentItemList from './src/index.js';
+
+/* istanbul ignore next */
+LwcDataDisplayDetailContentItemList.install = function(Vue) {
+	Vue.component(LwcDataDisplayDetailContentItemList.name, LwcDataDisplayDetailContentItemList);
+};
+
+export default LwcDataDisplayDetailContentItemList;

src/stories/data-display/detail-content-item-list/index.stories.js

+import LwcDataDisplayDetailContentItemList from './src/index.js';
+export default {
+	title: "Design System/Data Display/详情内容列表",
+	component: LwcDataDisplayDetailContentItemList,
+	argTypes: {},
+	decorators: [() => ({ template: '<el-col class="bg-white p-4"><story/></el-col>' })]
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { LwcDataDisplayDetailContentItemList },
+	template: '<lwc-data-display-detail-content-item-list v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	data: [{
+		className: ['mb-8'],
+		header: {
+			title: '基本信息',
+			subTitle: '副标题'
+		},
+		content: {
+			name: "lwc-data-display-descriptions",
+			attrs: {
+				bordered: true,
+				column: 3,
+				size: "default",
+				layout: "horizontal",
+				colon: true,
+			},
+			props: {
+				title: "基本信息",
+				className: [],
+				items: [
+					{
+						label: "商机标题",
+						value: "商机标题",
+					},
+					{
+						label: "关联客户",
+						value: "深圳市亿恩科技有限公司",
+						renderContent: {
+							name: "el-link",
+							props: { type: "primary" },
+							events: {
+								click: () => {
+									console.log("点击关联客户");
+								},
+							},
+						},
+					},
+					{
+						label: "关联订单",
+						value: "PO2021030100001",
+					},
+					{
+						label: "主要联系人",
+						value: "李小红",
+					},
+					{
+						label: "预计销售金额",
+						value: "¥10,000,00",
+					},
+					{
+						label: "预计签单日期",
+						value: "2019-03-28",
+					},
+				],
+			},
+		},
+	}, {
+		className: ['mb-8'],
+		header: {
+			title: '基本信息',
+			subTitle: '副标题'
+		},
+		content: {
+			name: "lwc-editor-quill",
+			props: {
+				value: "",
+				customUpload: true,
+				toolbar: [
+					['bold', 'italic', 'underline', 'strike'],
+				]
+			},
+		},
+	}]
+};

src/stories/data-display/detail-content-item-list/src/index.js

+import renderContentItemTitle from '../../../../renders/content-item-title';
+import renderHoc from '../../../../renders/hoc';
+
+export default {
+	name: "lwc-data-display-detail-content-item-list",
+	props: {
+		data: Array,
+		className: {
+			type: [Array, String, Object]
+		}
+	},
+	render(h) {
+		const { data, className } = this.$props;
+		return h("el-col", {
+			props: { ...this.$attrs },
+			class: className
+		}, [
+			data.map(item => {
+				const { header, content, className, attrs } = item
+				return [
+					h("el-col", {
+						props: { ...attrs },
+						class: className
+					}, [
+						header ? renderContentItemTitle(h, header) : null,
+						content ? renderHoc(h, this, content) : null
+					])
+				]
+			})
+		])
+	},
+};

src/stories/data-display/detail-header/src/index.js

@@ -149,7 +149,7 @@ export default {
 				}
 			},[
 				h('div', {
-					class: "overflow-hidden flex items-center",
+					class: "overflow-hidden",
 					style: {
 						"line-height": "32px"
 					}

src/stories/select/dialog/index.stories.js

@@ -223,7 +223,7 @@ mutilObjSelect.args = {
 export const mutilSelect = Template.bind({});
 mutilSelect.storyName = "Number/String多选";
 mutilSelect.args = {
-	value: [3, 5],
+	value: [3, 5, 10],
 	multiple: true,
 	type: "int",
 	optionProps: {
@@ -234,6 +234,12 @@ mutilSelect.args = {
 		id: "id",
 		name: "label",
 	},
+	initConfig: {
+		initQuery: true,
+		data: () => {
+			return [{ id: 10, label: "用户10" }, { id: 2, label: "用户2" }]
+		}
+	},
 	gridProps: {
 		gridConfig: {
 			border: "inner",

src/stories/select/dialog/src/index.js

@@ -82,7 +82,7 @@ function renderSelectOption(h, vm) {
  */
 function renderModel(h, vm) {
     return h("vxe-modal", {
-		class: { "hidden": vm.needFirstLoad && !vm.firstLoad },
+		class: { "hidden": !vm.initStatus },
         props: {
             width: "50%",
             transfer: true,
@@ -101,17 +101,16 @@ function renderModel(h, vm) {
 		on: {
 			// 确认事件
 			confirm: () => {
-				vm.selectValue = vm.multipleValue
-				vm.selectList = vm.multipleList
-				vm.$emit("update:value", vm.type === "obj" ? vm.selectList : vm.selectValue)
+				vm.initData(vm.multipleList)
+				vm.$emit("update:value", vm.type === "obj" ? vm.multipleList : vm.multipleValue)
 			},
 			show: ({ $modal }) => {
-				if(vm.needFirstLoad && !vm.firstLoad) {
+				if(!vm.initStatus) {
 					$modal.close()
 				}
 			},
 			hide: () => {
-				if(!vm.firstLoad) vm.firstLoad = true
+				if(!vm.initStatus) vm.initStatus = true
 			}
 		}
     })
@@ -128,12 +127,12 @@ function buildGridConfig(vm, $modal) {
 	if(gridConfig.proxyConfig) {
 		// 默认加载数据后加载选中checkbox
 		vm.$set(gridConfig.proxyConfig, "afterQuery", ({ $grid }) => {
-			if(vm.type === "int" && vm.needFirstLoad && !vm.firstLoad) vm.selectList = $grid.tableData.map(row => {
+			if(vm.type === "int" && !vm.initStatus) vm.initData($grid.tableData.map(row => {
 				return {
 					[vm.optionProps.id]: row[vm.columnsProps.id],
 					[vm.optionProps.name]: row[vm.columnsProps.name],
 				}
-			})
+			}))
 			setTableCheckRow(vm, $grid)
 		})
 	}
@@ -166,15 +165,20 @@ function buildGridConfig(vm, $modal) {
 					} else {
 						$grid.clearCheckboxRow()
 						$grid.setCheckboxRow(row, true)
-						vm.selectList = [{
+						let selectRowObj = {
 							[vm.optionProps["id"]]: XEUtils.get(row, vm.columnsProps["id"]),
 							[vm.optionProps["name"]]: XEUtils.get(row, vm.columnsProps["name"])
-						}]
-						vm.selectValue = XEUtils.get(row, vm.columnsProps["id"])
+						}
 						if(vm.type === 'obj') {
-							vm.$emit("update:value", vm.selectList[0])
+							vm.$emit("update:value", selectRowObj)
 						} else {
-							vm.$emit("update:value", vm.selectValue)
+							let selectListIndex = vm.selectList.findIndex(list => {
+								return list[vm.optionProps["id"]] === XEUtils.get(row, vm.columnsProps["id"])
+							})
+							if(selectListIndex < 0) {
+								vm.selectList.push(selectRowObj)
+							}
+							vm.$emit("update:value", XEUtils.get(row, vm.columnsProps["id"]))
 						}
 						$modal.close();
 						vm.$emit("select", row)
@@ -252,29 +256,17 @@ function setTableCheckRow(vm, $grid) {
 		if(row) tableGrid.setCheckboxRow(row, true)
 	}
 }
-/**
- * @Author: dy
- * @Date: 2021-05-14 14:57:49
- * @Desc: 设置默认值
- */
-function setDefaultValue(vm) {
-	vm.selectValue = vm.multiple ? [] : null
-	if(vm.multiple && Array.isArray(vm.value) && vm.value.length > 0 || vm.value && !vm.multiple) {
-		if(vm.type === "obj") {
-			vm.selectValue = vm.multiple ? vm.value.map(v => { return v[vm.optionProps["id"]] }) : vm.value[vm.optionProps["id"]]
-			vm.selectList = vm.multiple ? vm.value : [vm.value]
-		} else {
-			// 判断value有值时默认请求接口获取到selectList
-			vm.needFirstLoad = true
-			vm.selectValue = vm.value
-			// vm.selectList = vm.gridProps.gridConfig.data || []
-		}
-	}
-}
 
 function renderTableCell(h, vm) {
+	let tagOpts = {}
+	if(!vm.multiple && vm.type === 'int') {
+		tagOpts = vm.selectList.find(item => { return vm.selectValue === item[vm.optionProps["id"]]})
+	}
 	return [
 		vm.multiple ? vm.value.map(tag => {
+			tagOpts = (vm.selectList.find(item => {
+				return (tag[vm.optionProps["id"]] || tag) === item[vm.optionProps["id"]]
+			})) || {}
 			return h("el-tag", {
 				props: {
 					type: "info",
@@ -283,8 +275,8 @@ function renderTableCell(h, vm) {
 			}, [
 				h("span", {
 				class: "el-select__tags-text"
-			}, tag[vm.optionProps["name"]] || tag)
-		]) }) : vm.type === "obj" ? vm.value[vm.optionProps["name"]] : vm.value
+			}, tagOpts[vm.optionProps["name"]] || tag)
+		]) }) : vm.type === "obj" ? vm.value[vm.optionProps["name"]] : (tagOpts[vm.optionProps["name"]] || vm.value)
 	]
 }
 export default {
@@ -313,6 +305,12 @@ export default {
 				return false
 			}
 		},
+		initConfig: {
+			type: Object,
+			default: function() {
+				return {}
+			}
+		},
 		selectProps: {
 			type: Object,
 			default: function() {
@@ -341,39 +339,64 @@ export default {
 			selectModel: null,
 			selectValue: null,
 			selectList: [],
-			needFirstLoad: false, // 是否需要初次加载
-			firstLoad: false,
+			initStatus: false,
 			multipleList: [],
 			multipleValue: null
 		}
 	},
-	mounted() {
-		let self = this
-		self.$nextTick(() => {
-			if(self.needFirstLoad && !self.firstLoad && !self.renderCell) self.$refs[self.selectInput].toggleMenu()
-		})
-	},
-	created() {
-		let self = this
-		if(!self.selectInput) self.selectInput = `select-input-${uuidv4()}`
-		if(!self.selectTable) self.selectTable = `select-table-${uuidv4()}`
-		if(!self.selectModel) self.selectModel = `select-model-${uuidv4()}`
-		setDefaultValue(self)
+	methods: {
+		/**
+		 * @Author: dy
+		 * @Date: 2021-06-18 10:33:32
+		 * @Desc: 初始化下拉selectList列表的值 用于select显示
+		 */
+		initData(data, replace) {
+			if(replace) {
+				this.selectList = data
+			} else {
+				let selectIdList = _.pluck(this.selectList, this.optionProps.id)
+				data.forEach(item => {
+					if(selectIdList.indexOf(item[this.optionProps.id]) < 0) {
+						this.selectList.push(item)
+					}
+				})
+			}
+		}
 	},
-	watch: {
-		value(val) {
-			this.selectList = []
-			if(val) {
+	mounted() {
+		this.$watch('value', function(val){
+			if((typeof val === 'object' && !_.isEmpty(val)) || val) {
 				if(this.type === "obj") {
+					this.selectList = []
 					this.selectValue = this.multiple ? val.map(v => { return v[this.optionProps["id"]] }) : val[this.optionProps["id"]]
-					this.selectList = this.multiple ? val : []
+					this.selectList = this.multiple ? val : [val]
 				} else {
 					this.selectValue = val
+					// 判断是否初始化
+					if(!this.initStatus) {
+						// 默认初始化代理请求为true
+						let { initQuery = true, data } = this.initConfig
+						// 初始化代理请求
+						if(initQuery && !this.renderCell) {
+							this.$refs[this.selectInput].toggleMenu()
+						}
+						if(data) {
+							return Promise.resolve(data()).catch(e => e).then(res => {
+								if(!_.isEmpty(res)) this.initData(res)
+							})
+						}
+					}
 				}
 			} else {
 				this.selectValue = this.multiple ? [] : null
 			}
-		}
+		}, { immediate: true })
+	},
+	created() {
+		let self = this
+		if(!self.selectInput) self.selectInput = `select-input-${uuidv4()}`
+		if(!self.selectTable) self.selectTable = `select-table-${uuidv4()}`
+		if(!self.selectModel) self.selectModel = `select-model-${uuidv4()}`
 	},
 	render(h) {
 		return [

src/stories/select/down-table/index.stories.js

@@ -8,7 +8,7 @@ export default {
 		multiple: { type: "boolean", description: "是否多选" },
 		type: { type: "string", description: "绑定值类型 默认obj", control: { type: "select", options: [
 			"obj", "int"
-		] }},
+		] } },
 		optionProps: { type: "object", description: "type为obj时生效, 对应value对象的值{ id, name }" },
 		columnsProps: { type: "object", description: "对应table对象的值{ id, name }" },
 		selectProps: { type: "object", description: "参看select Props" },
@@ -47,7 +47,7 @@ let data = [
 export const Default = Template.bind({});
 Default.storyName = "Object单选"
 Default.args = {
-	value: {id: 5, username: "用户5"},
+	value: { id: 5, username: "用户5" },
 	optionProps: {
 		id: "id",
 		name: "username"
@@ -140,7 +140,7 @@ singleSelect.args = {
 export const mutilObjSelect = Template.bind({});
 mutilObjSelect.storyName = "Object多选"
 mutilObjSelect.args = {
-	value: [{id: 5, username: "用户5"}, {id: 8, username: "用户8"}],
+	value: [{ id: 5, username: "用户5" }, { id: 8, username: "用户8" }],
 	multiple: true,
 	optionProps: {
 		id: "id",
@@ -191,17 +191,22 @@ mutilObjSelect.args = {
 	}
 };
 
-
 export const mutilSelect = Template.bind({});
 mutilSelect.storyName = "Number/String多选"
 mutilSelect.args = {
-	value: [3,5],
+	value: [3,4,10],
 	multiple: true,
 	type: "int",
 	columnsProps: {
 		id: "id",
 		name: "label"
 	},
+	initConfig: {
+		initQuery: true,
+		data: () => {
+			return [{ id: 10, name: "用户10" }]
+		}
+	},
 	gridProps: {
 		gridConfig: {
 			border: "inner",
@@ -240,5 +245,3 @@ mutilSelect.args = {
 	}
 };
 
-
-

src/stories/select/down-table/src/index.js

@@ -21,9 +21,9 @@ function renderSelect({ h, $pulldown, vm }) {
 				if(state) {
 					vm.$refs[vm.selectInput].blur();
 					$pulldown.showPanel().then(() => {
-						if(vm.needFirstLoad && !vm.firstLoad) {
+						if(!vm.initStatus){
 							$pulldown.hidePanel().then(() => {
-								vm.firstLoad = true
+								vm.initStatus = true
 							})
 						}
 					})
@@ -90,20 +90,21 @@ function renderSelectOption(h, vm) {
  */
 function buildGridConfig(vm, $pulldown) {
 	let { gridConfig, ...otherConfig } = vm.gridProps
-	let { events = {}, ...otherGridConfig } = gridConfig
+	let { events = {},  ...otherGridConfig } = gridConfig
 	let { "cell-click":cellClick, "checkbox-all":checkboxAll, ...otherEvents } = events
 	if(gridConfig.proxyConfig) {
 		// 默认加载数据后加载选中checkbox
 		vm.$set(gridConfig.proxyConfig, "afterQuery", ({ $grid }) => {
-			if(vm.type === "int" && vm.needFirstLoad && !vm.firstLoad) vm.selectList = $grid.tableData.map(row => {
+			if(vm.type === "int" && !vm.initStatus) vm.initData($grid.tableData.map(row => {
 				return {
 					[vm.optionProps.id]: row[vm.columnsProps.id],
 					[vm.optionProps.name]: row[vm.columnsProps.name],
 				}
-			})
+			}))
 			setTableCheckRow(vm, $grid)
 		})
 	}
+
 	return {
 		...otherConfig,
 		gridConfig: {
@@ -133,15 +134,21 @@ function buildGridConfig(vm, $pulldown) {
 					} else {
 						$grid.clearCheckboxRow()
 						$grid.setCheckboxRow(row, true)
-						vm.selectList = [{
+
+						let selectRowObj = {
 							[vm.optionProps["id"]]: XEUtils.get(row, vm.columnsProps["id"]),
 							[vm.optionProps["name"]]: XEUtils.get(row, vm.columnsProps["name"])
-						}]
-						vm.selectValue = XEUtils.get(row, vm.columnsProps["id"])
+						}
 						if(vm.type === 'obj') {
-							vm.$emit("update:value", vm.selectList[0])
+							vm.$emit("update:value", selectRowObj)
 						} else {
-							vm.$emit("update:value", vm.selectValue)
+							let selectListIndex = vm.selectList.findIndex(list => {
+								return list[vm.optionProps["id"]] === XEUtils.get(row, vm.columnsProps["id"])
+							})
+							if(selectListIndex < 0) {
+								vm.selectList.push(selectRowObj)
+							}
+							vm.$emit("update:value", XEUtils.get(row, vm.columnsProps["id"]))
 						}
 						$pulldown.hidePanel()
 						vm.$emit("select", row)
@@ -183,17 +190,17 @@ function selectRow({ vm, checked, toggle, row, $grid }) {
 	})
 	if(toggle ? selectIndex >= 0 : (!checked && selectIndex >= 0)) {
 		vm.selectValue.splice(selectIndex, 1)
-		vm.selectList.splice(selectListIndex, 1)
+		if(selectListIndex >= 0) vm.selectList.splice(selectListIndex, 1)
 	}
 	if(toggle ? selectIndex < 0 : (checked && selectIndex < 0)) {
 		vm.selectValue.push(XEUtils.get(row, vm.columnsProps["id"]))
-		vm.selectList.push({
+		if(selectListIndex < 0) vm.selectList.push({
 			[vm.optionProps["id"]]: XEUtils.get(row, vm.columnsProps["id"]),
 			[vm.optionProps["name"]]: XEUtils.get(row, vm.columnsProps["name"])
 		})
 	}
 	$grid.setCheckboxRow(row, toggle ? selectIndex < 0 : checked)
-	vm.$emit("update:value", vm.type === "obj" ? vm.selectList : vm.selectValue)
+	vm.$emit("update:value", vm.type === "obj" ? JSON.parse(JSON.stringify(vm.selectList)) : vm.selectValue)
 }
 
 /**
@@ -220,29 +227,17 @@ function setTableCheckRow(vm, $grid) {
 		if(row) tableGrid.setCheckboxRow(row, true)
 	}
 }
-/**
- * @Author: dy
- * @Date: 2021-05-14 14:57:49
- * @Desc: 设置默认值
- */
-function setDefaultValue(vm) {
-	vm.selectValue = vm.multiple ? [] : null
-	if(vm.multiple && Array.isArray(vm.value) && vm.value.length > 0 || vm.value && !vm.multiple) {
-		if(vm.type === "obj") {
-			vm.selectValue = vm.multiple ? vm.value.map(v => { return v[vm.optionProps["id"]] }) : vm.value[vm.optionProps["id"]]
-			vm.selectList = vm.multiple ? vm.value : [vm.value]
-		} else {
-			// 判断value有值时默认请求接口获取到selectList
-			vm.needFirstLoad = true
-			vm.selectValue = vm.value
-			// vm.selectList = vm.gridProps.gridConfig.data || []
-		}
-	}
-}
 
 function renderTableCell(h, vm) {
+	let tagOpts = {}
+	if(!vm.multiple && vm.type === 'int') {
+		tagOpts = vm.selectList.find(item => { return vm.selectValue === item[vm.optionProps["id"]]})
+	}
 	return [
 		vm.multiple ? vm.value.map(tag => {
+			tagOpts = (vm.selectList.find(item => {
+				return (tag[vm.optionProps["id"]] || tag) === item[vm.optionProps["id"]]
+			})) || {}
 			return h("el-tag", {
 				props: {
 					type: "info",
@@ -251,8 +246,8 @@ function renderTableCell(h, vm) {
 			}, [
 				h("span", {
 				class: "el-select__tags-text"
-			}, tag[vm.optionProps["name"]] || tag)
-		]) }) : vm.type === "obj" ? vm.value[vm.optionProps["name"]] : vm.value
+			}, tagOpts[vm.optionProps["name"]] || tag)
+		]) }) : vm.type === "obj" ? vm.value[vm.optionProps["name"]] : (tagOpts[vm.optionProps["name"]] || vm.value)
 	]
 }
 
@@ -276,6 +271,12 @@ export default {
 				return { id: "id", name: "name" }
 			}
 		},
+		initConfig: {
+			type: Object,
+			default: function() {
+				return {}
+			}
+		},
 		multiple: {
 			type: Boolean,
 			default: function() {
@@ -303,36 +304,61 @@ export default {
 			selectTable: null,
 			selectValue: null,
 			selectList: [],
-			needFirstLoad: false, // 是否需要初次加载
-			firstLoad: false
+			initStatus: false,
 		}
 	},
-	mounted() {
-		let self = this
-		self.$nextTick(() => {
-			if(self.needFirstLoad && !self.firstLoad && !self.renderCell) self.$refs[self.selectInput].toggleMenu()
-		})
+	methods: {
+		/**
+		 * @Author: dy
+		 * @Date: 2021-06-18 10:33:32
+		 * @Desc: 初始化下拉selectList列表的值 用于select显示
+		 */
+		initData(data, replace) {
+			if(replace) {
+				this.selectList = data
+			} else {
+				let selectIdList = _.pluck(this.selectList, this.optionProps.id)
+				data.forEach(item => {
+					if(selectIdList.indexOf(item[this.optionProps.id]) < 0) {
+						this.selectList.push(item)
+					}
+				})
+			}
+		}
 	},
 	created() {
 		let self = this
 		if(!self.selectInput) self.selectInput = `select-input-${uuidv4()}`
 		if(!self.selectTable) self.selectTable = `select-table-${uuidv4()}`
-		setDefaultValue(self)
 	},
-	watch: {
-		value(val) {
-			this.selectList = []
-			if(val) {
+	mounted() {
+		this.$watch('value', function(val){
+			if((typeof val === 'object' && !_.isEmpty(val)) || val) {
 				if(this.type === "obj") {
+					this.selectList = []
 					this.selectValue = this.multiple ? val.map(v => { return v[this.optionProps["id"]] }) : val[this.optionProps["id"]]
-					this.selectList = this.multiple ? val : []
+					this.selectList = this.multiple ? val : [val]
 				} else {
 					this.selectValue = val
+					// 判断是否初始化
+					if(!this.initStatus) {
+						// 默认初始化代理请求为true
+						let { initQuery = true, data } = this.initConfig
+						// 初始化代理请求
+						if(initQuery && !this.renderCell) {
+							this.$refs[this.selectInput].toggleMenu()
+						}
+						if(data) {
+							return Promise.resolve(data()).catch(e => e).then(res => {
+								if(!_.isEmpty(res)) this.initData(res)
+							})
+						}
+					}
 				}
 			} else {
 				this.selectValue = this.multiple ? [] : null
 			}
-		}
+		}, { immediate: true })
 	},
 	render(h) {
 		return [
@@ -353,7 +379,7 @@ export default {
 					},
 					dropdown: ({ $pulldown }) => {
 						return h("el-card", {
-							class: { "hidden": this.needFirstLoad && !this.firstLoad },
+							class: { "hidden": !this.initStatus },
 							props: {
 								"body-style": {
 									padding: "15px 15px 5px 15px",

src/stories/select/goods/src/index.js

@@ -70,7 +70,8 @@ function renderRightTable(h, _vm) {
 						'checkbox-change': () => {
 							const list = _vm.getCheckboxRecords();
 							_vm.$emit('update:value', list);
-						}
+						},
+						..._vm.gridConfig.events
 					}
 				}
 			},

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

@@ -57,7 +57,7 @@ const renderToolbar = (h, toolbarConfig, contentConfig, _vm) => {
 			"border-bottom": "1px solid #e8eaec"
 		} : {},
 		props: {
-			className: 'px-4',
+			className: _vm.paddingX,
 			...toolbarConfig
 		},
 		scopedSlots: toolbar ? {
@@ -266,7 +266,7 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
 	// 布局容器，默认 px-4
 	let boxClass = []
 	if (_vm.className.length === 0) {
-		boxClass = ['w-full', 'h-full', 'px-4', 'bg-white']
+		boxClass = ['w-full', 'h-full', _vm.paddingX, 'bg-white']
 	} else {
 		boxClass = ['w-full', 'h-full', 'bg-white'].concat(_vm.className)
 	}
@@ -338,7 +338,11 @@ export default {
 			default() {
 				return ['checkbox', "seq", "expand"]
 			}
-		}
+		},
+		paddingX: {
+			type: String,
+			default: "px-4"
+		},
 	},
 	data() {
 		return {
@@ -526,7 +530,7 @@ export default {
 			}
 		}, [
 			formConfig ? h("vxe-form", {
-				class: "mb-4 px-4 py-4",
+				class: "mb-4 py-4 " + this.paddingX,
 				props: {
 					...formConfig
 				},

src/stories/tags/list/index.js

+import LwcTagsList from './src/index.js';
+
+/* istanbul ignore next */
+LwcTagsList.install = function(Vue) {
+	Vue.component(LwcTagsList.name, LwcTagsList);
+};
+
+export default LwcTagsList;

src/stories/tags/list/index.stories.js

+import LwcTagsTagsList from './src/index.js';
+export default {
+	title: "Design System/Tag/标签列表",
+	component: LwcTagsTagsList,
+	argTypes: {},
+	decorators: [() => ({ template: '<el-col class="bg-white p-4"><story/></el-col>' })]
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { LwcTagsTagsList },
+	template: '<lwc-tags-tags-list v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	data: [{
+		name: "语文"
+	}, {
+		name: "数学"
+	}],
+	tagProps: {
+		type: "primary"
+	}
+};

src/stories/tags/list/src/index.js

+export default {
+	name: 'lwc-tags-list',
+	props: {
+		data: {
+			type: Array,
+			default: () => {
+				return []
+			}
+		},
+		className: {
+			type: [Array, String, Object]
+		},
+		label: {
+			type: String,
+			default: () => {
+				return "name"
+			}
+		},
+		tagProps: Object
+	},
+	render(h) {
+		const { data, className, label, tagProps } = this.$props;
+		return h("el-col", {
+			props: { ...this.$attrs },
+			class: className
+		}, [
+			data.map(item => {
+				return h("el-tag", {
+					class: "mr-2",
+					props: {
+						type: "info",
+						size: "small",
+						...tagProps
+					}
+				}, [
+					h("span", {
+					class: "el-select__tags-text"
+				}, item[label] || item)
+				])
+			})
+		])
+	}
+}
+