灵活的css

1 不同情况下显示不同的类：

<div v-for="(mannger,index) in managerInfo" :key="index" :class="index%2==0?'':'thirdBack'">

2

* :class
	 * :class="a"
	 * :class="{classA : isA, classB : isB}"
	 * :class="[classA, classB]"
* :style
	:style="{color : color}"
	例<span :style="{left : item.left+'%'}" class="spanNum">({{item.pointTotal}})</span>

3 <style scoped>标签下有的style不生效，需写在style标签下：

.process-service tr:hover{
    cursor: pointer;
  }

5 选第一个，最后一个el-tree-node元素：

	.el-tree-node:nth-child(1){
    border-top:1px solid #999999;
  }
  .el-tree-node:nth-last-of-type(2){
    border-bottom:1px solid #999999;
  }
  .defense_list li:nth-child(2n+0) p .icon

6 父子关系：.el-tree>.el-tree-node
4 let 定义一个变量只能写一次，多次报错。
7 request请求之后的运行，顺序写下来，可能抓不到request之后的结果，要写在request请求成功的里面。
8 webpack打包之后的元素class加载顺序可能会变化，如果一个元素有多个相同属性，写style。
9 js设置样式：

<el-table :data="logInfo" @cell-mouse-enter="cellTool">
        <el-table-column  property="taskName" label="当前环节" show-overflow-tooltip=""></el-table-column>
</el-table>
cellTool(row, column, cell, event){
        let len=cell.children[0].innerHTML.length
        if(len>48){
          document.querySelector(".el-tooltip__popper").style.width="600px"
        }else{
          document.querySelector(".el-tooltip__popper").style.width="auto"
        }
      }

9.1 js加类名：
如何给一个节点添加和删除class名
添加：节点.classList.add(“类名”)；
删除：节点.classList.remove(“类名”)；
10 element中的el-dialog由于元素与app同级,设置dialog中的custom-class,设置祖先元素。
11 vue中选中dom元素，使用ref：

 <div v-for='(item,key) in buildList' :key="key"  ref="list">
  this.$refs.list[key].style.color = "#5E72E4";

12 calc设置宽度、高度：
calc的语法就是简单的四则运算，
1 使用“+”、“-”、“” 和 “/”四则运算；
2 可以使用百分比、px、em、rem等单位；
3 可以混合使用各种单位进行计算；
4 表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的；
5 表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。

height: calc(100vh - 290px);
height:-moz-calc(100vh - 290px);
height:-webkit-calc(100vh - 290px);