uni-app动态绑定css样式的width

uni-app动态绑定width

需求描述

做的项目需要实现一个类似table的功能,但是由于表格的内容不是固定的,如果把css的width写死,就可能导致内容太长而无法全部显示。

解决需求

要解决上述问题就需要动态的改变width

添加内联样式如下:
库房
computed: {
			// 库房——最大长度
			HN_width() {
				var MaxLength = 2;
				var Row_Materials = this.Row_Materials;
				if (Row_Materials != null && Row_Materials.length > 0) {
					Row_Materials.forEach((item, index) => {
						if (item['HN'].length > MaxLength) {
							MaxLength = item['HN'].length;
						}
					});
				}
				return uni.upx2px(MaxLength * 30 + 20) + 'px';
			},
}
因为uni-app无法直接使用upx动态修改,所以需要使用uni.upx2px(Number)转换一下。这样就可以根据内容的长度动态的修改width了。
可以根据自己的实际需求应用在其他场景

你可能感兴趣的:(uni-app使用心得,uni-app,动态绑定width)