Vue的踩坑记录2

还是对目前做的后台项目踩的坑进行记录

这次的问题主要是对使用vue之后然后对修改样式的一些不理解，还是保留着之前用前端三剑客代码来写页面的思维，所以遇到了很多麻烦

vue中使用内联样式，外联样式这些都是没问题的，这个时候给一个class样式然后就可以让元素改变，但是一般情况下使用vue组件是会使用第三方库的，第三方库呢很多标签都会有自己的样式，比如这次我使用的是Element，给出链接

https://element.eleme.cn/#/zh-CN/component/changelog

如果没有用过的话大家有兴趣的可以去看一看，这个时候这些元素比如什么el-form、el-table等等这些最外层的属性使用class样式等还是可以直接修改的

<el-input placeholder="需要查找的商品信息" class="search-box" v-model="input"></el-input>
<el-table :data="filteredDorm" border class="table" ref="multipleTable"  max-height="430"
v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-table-column prop="id" label="ID" width="80" align="center" fixed></el-table-column>
      <el-table-column prop="description" label="商品描述" align="center"></el-table-column>
</el-table>

<style scoped>

.search-box {
  width: 300px;
  display: inline-block;
  margin-bottom:20px;
}
.table{
  margin-top:25px;
}
</style>

本来这个给的element他给的属性基本都要自己的样式，而且那些样式设置的都挺好看的，但是这次我们的项目需要使用markdown编辑器，然后需要对商品进行一些详细的描述和解释，这时候商品的解释肯定需要图片，然后发送到后台返回来的是base64，所以图片会被解析成很长很长一段，然后上述代码中有个详细描述，这个是精简的商品描述，上传图片的话就将markdown的html格式发给后台然后在返回显示在详细描述中，所以如果不对他加一个样式限制高度，就会出现如下图的惨烈情景

这基本就是滑到手软都看不到操作在哪，严重影响用户体验，所以我天真的在el-table-column上加了一个class样式，然后没用，然后打开页面看了源码，发现e-table-column上没有我添加的样式，这个时候我才意识到有点天真了，然后看到div中有个样式cell

/*所以我直接这样修改了样式*/
.cell{
  max-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

但是出现了其他我无法理解的事情，就是在商品组件中这样写并没有用，当然也不是每次都没有用，就是刷新几次可能会有一次可以限制高度的，这就很奇怪了，而且除了商品组件还有一个问题组件中也是需要限制高度，所以我直接修改cell的样式，结果问题组件是可以的，我已经确定了两个都是使用了el-table和el-table-column了，而且都没有其他的样式修改，但是就是有一个不成功

然后查找了好多资料，发现了style标签上有一个scope属性，当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。原来我的商品组件中的style确实是加了一个scope的，只要去掉就可以了

但是我不信邪啊，加scope多好啊，要是污染了其他组件的标签那这个样式就可能乱套了，所以我想到了一个深度选择器“>>>”

<div class="product">
	<el-input placeholder="需要查找的商品信息" class="search-box" v-model="input"></el-input>
	<el-table :data="filteredDorm" border class="table" ref="multipleTable"  max-height="430"
v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-table-column prop="id" label="ID" width="80" align="center" fixed></el-table-column>
      <el-table-column prop="description" label="商品描述" align="center"></el-table-column>
	</el-table>
</div>

<style scoped>

.search-box {
  width: 300px;
  display: inline-block;
  margin-bottom:20px;
}
.table{
  margin-top:25px;
}
.product>>>.cell{
  max-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

然后就完美的解决了这个问题，果然还是深度选择器好用