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;
	;
}
相关推荐
李长鸿10 小时前
vue3中的插槽和其他
vue.js
安卓开发者10 小时前
鸿蒙Next的UI国际化与无障碍适老化实践:构建全球包容的数字世界
ui·华为·harmonyos
jqq66610 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
笑尘pyrotechnic10 小时前
push pop 和 present dismiss
macos·ui·ios·objective-c·cocoa
aiden:)12 小时前
App UI 自动化环境搭建指南
运维·python·ui·appium·自动化
知识分享小能手14 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
webYin21 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
小薛博客1 天前
23、Jenkins容器化部署Vue应用
运维·vue.js·jenkins