element ui中穿梭框等列表文字显示过长隐藏问题处理

主要记录一下element ui组件中穿梭框、table列表内容显示不全解决方式

对于Transfer 穿梭框中的文字过长隐藏问题处理：

1.实现效果：

解决方式;
1.

<el-row :gutter="30">
				<el-col :span="24" class="input-box">
					<el-form-item label-width="70px">
						<el-transfer id="transfer" :titles="['待选监管银行', '已选监管银行']" :props="{ key: 'jgyhxlbh', label: 'jgyhxlmc' }"
							filterable filter-placeholder="请输入银行名称" v-model="form.transferValue" :data="transfer" @change="checkSel"
							:render-content="renderFunc">
						</el-transfer>
					</el-form-item>
				</el-col>
			</el-row>

js

renderFunc(h, option) {
		return <span title={option.jgyhxlmc}>{option.jgyhxlmc}</span>;
	},

2.改变穿梭框的宽度，在工程中全文搜索.el-transfer-panel，找到定义这个类的地方，修改宽度。

<style>
#transfer .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
	font-size: 13px !important;
}
</style>

对于table表格中的文字过长隐藏问题处理：

<el-table-column label="项目地址" align="center" prop="xmwz" min-width="150" :show-overflow-tooltip='true'>

.el-tooltip__popper {
	max-width: 20%;
}

.el-tooltip__popper,
.el-tooltip__popper.is-dark {
	background: #f5f5f5 !important;
	color: #303133 !important;
}