vue组件style加scoped

最新推荐文章于 2023-11-30 15:01:57 发布

原创最新推荐文章于 2023-11-30 15:01:57 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

5 篇文章

订阅专栏

学习

3 篇文章

订阅专栏

解决

2 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何针对el-table组件进行特定样式的调整，包括使用scoped样式规则来精确控制表格内的元素样式，如label宽度、颜色及单元格对齐方式等。

组件a.vue代码

<el-table>
	<el-table-column type="expand">
		<template slot-scope="props">
			<el-form label-position="left" inline class="table-expand">
				<el-form-item label="名称">
                     <span>{{ props.row.name}}</span>
                 </el-form-item>
                 .........
			</el-form>
		</template>
	</el-table-column>
	<el-table-column
	 label="名称"
     prop="name"
     />
     <el-table-column
	 label="状态"
     prop="status"
     class-name="j-status"
     >
	     <template slot-scope="scope">
	         <i
	             :class="el-icon-error"
	           />
	      </template>
     </el-table-column>
</el-table>

浏览器渲染的结果：

<div data-v-63e05c79="">
<div data-v-63e05c79="" class="el-table el-table--fit el-table--fluid-height el-table--enable-row-hover el-table--enable-row-transition el-table--mini" style="width: 100%; max-height: 210px;">
......
<tr>
	<td rowspan="1" colspan="1" class="el-table_28_column_167  j-status">
		<div class="cell">
			<i data-v-63e05c79="" class="el-icon-error"></i>
		</div>
	</td>
</tr>
......
<tr>
	<td colspan="7" class="el-table__expanded-cell">
		<form data-v-63e05c79="" class="el-form table-expand el-form--label-left ....">
			<div data-v-63e05c79="" class="el-form-item">
				<label class="el-form-item__label">名称</label>
				<div class="el-form-item__content">
					<span data-v-63e05c79="">xxx</span>
				</div>
			</div>
		</form>
	</td>
</tr>
......
</div>
</div

在组件 a.vue中测试如下样式

<style scoped>
	/*不能生效的 */
	.table-expand  label {
    width: 90px;
    color: #99a9bf;
  }
  .el-table .j-status .cell{
    text-align: center;
  }
  /*不能生效的 */
  
  /*能生效的 */
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .table-expand >>> label {
    width: 90px;
    color: #99a9bf;
  }
  .el-table >>> .job-status .cell{
    text-align: center;
  }
  .job-status i{
    font-size: 20px;
  }
  /*能生效的 */
</style>

scoped的规则大概如下（从浏览器渲染的结果看）：
为方便说明，css类所在的元素中含有data-v-*的称为vclass或vele，不含的称为class或ele