element UI汉语维语双语显示

汉语维语双语显示

按钮，标签，表格表头等汉语维语双语显示

按钮，标签，表格表头等汉语维语双语显示

el-form-item标签双语

javascript 复制代码

<el-form-item label="名称" prop="irrName">
	<el-input v-model="queryParams.irrName" placeholder="请输入名称" clearable
		style="background-color: #f5f5f5;" />
	<div style="margin-top:-15px; margin-left:-70px; font-size: 12px;">修改成对应维语</div>
</el-form-item>

el-button按钮内容双语

javascript 复制代码

<el-button type="primary" size="mini" @click="handleQuery">
	<span>查询</span><br />
	<span style="font-size:12px!important;">修改成对应维语</span>
</el-button>

el-table表头双语及表格样式

表头双语

表头的样式是公用的，无需单独设置

javascript 复制代码

<el-table-column align="center" prop="irrName" >
	<template #header>
		<div class="custom-header">
			<div class="header-line1">名称</div>
			<div class="header-line2">修改成对应的维语</div>
		</div>
	</template>
</el-table-column>

css样式不用设置，公共样式封装好了。

css 复制代码

.custom-header {
  line-height: 1.1; /* 调整行高避免重叠 */
}
.header-line1 {
  font-size: 14px;
  color: rgba(89, 89, 89, 1);
  font-weight: bold;
}
.header-line2 {
  font-size: 12px;
  color: rgba(89, 89, 89, 1);
  font-style: italic;
}

表格样式

表头模板中加入cell-style 、 header-cell-style 、 row-class-name属性

js 复制代码

<el-table v-loading="loading" stripe="stripe" :data="baseList" @selection-change="handleSelectionChange" :cell-style="{ height: '46px', color: '#595959' }" :header-cell-style="{background: '#f2f4fa',fontWeight: '400',fontSize: '16px;',height: '54px',	color: 'rgba(26,26,26,1)'}" :row-class-name="tableRowClassName">

js的methods中加入tableRowClassName 方法

js 复制代码

tableRowClassName ({ row, rowIndex }) {
	if (rowIndex % 2 != 0) {
		return 'warning-row';
	}
	return '';
},

css中加入下面代码必须引入，无法封装

css 复制代码

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
	border: none !important;
}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
	background-color: transparent !important;
}

::v-deep .el-table .warning-row {
	background: #f5f5f5;
}
::v-deep .el-table td.el-table__cell div {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #595959 !important;
	;
}