css 总结

目录

前言：

正文：

1、首页导航栏点点击变色+跳转

2.列表ui li 循环 后 ，点击某一个li 变色

3.点击，更换图片，并显示某些内容

4.element ui table 更改样式

5.表格 行数列数不确定，循环表格

6.element ui 表格 某一列根据内容修改样式

7、echart 在vue中自适应 resize 

8、echart X / Y 轴添加箭头

---

前言：

由于我写css实在太慢，布局结构再加上刚接触vue时间不多，特写此博客记录下css样式和布局心得，如有可优化的地方，请不吝赐教！

正文：

1、首页导航栏点点击变色+跳转

先看下效果：

html：

<div class="nav_list">
          <ul >
            <li v-for="(item,index) in MenuData" :class="Index==index+1?'menu_check':''" :key="item+index" @click="gotoPath(item.path,index+1)"  >{{item.NAME}}</li>
          </ul>
        </div>

变量：

MenuData: [{
        NAME: "生态资源",
        path: "/sysStzy"
      }, {
        NAME: "生态管护",
        path: "/sysxhdt"
      }, {
        NAME: "生态科研",
        path: "/stkymain"
      }, {
        NAME: "生态评估",
        path: "/sysStpg"
      }, {
        NAME: "社区共管",
        path: "/sdc"
      }, {
        NAME: "执法台账",
        path: "/zfda"
      }, {
        NAME: "综合管理",
        path: "/zhgl"
      }, {
        NAME: "生态文化",
        path: "/ls"
      }],
      Index: 0,

js方法：

gotoPath: function (page, index) {
      this.Index = index;
      sessionStorage.setItem("Index", index);
      this.$router.push({
        path: page
      })
    },

css样式：

.menu_check{
  color: #B7E4FA !important;
}

上面其实就是vue中绑定一个data，然后遍历创建元素，然后点击通过下标进行跳转然后在绑定样式类

 

2.列表ui li 循环 后 ，点击某一个li 变色

 <ul v-model="layerTitle" v-show="ztfx_icon=='static/images/comparisonOfChanges/ztfxT.png'">
            <li :style="{'background-color':(layerTitle==item.name)?'#018F77':''}" @click="getLayerTitle(item.name)" v-for="(item,index) in layerListInfo">{{ item.name }}</li>
          </ul>

实现方法其实用的是绑定的style ，记录下这种写法

3.点击，更换图片，并显示某些内容

 <li class="li_top">
          <div @click="showZtfx" class="li_top_div">
            <img :src=ztfx_icon alt=""><span
            :style="{'color':(ztfx_icon=='static/images/comparisonOfChanges/ztfxT.png'?'#62FCEB':'#05B5C6')}">专题分析</span>
          </div>
          <ul v-model="layerTitle" v-show="ztfx_icon=='static/images/comparisonOfChanges/ztfxT.png'">
            <li :style="{'background-color':(layerTitle==item.name)?'#018F77':''}" @click="getLayerTitle(item.name)" v-for="(item,index) in layerListInfo">{{ item.name }}</li>
          </ul>
        </li>

 ztfx_icon: "static/images/comparisonOfChanges/ztfxF.png",

showZtfx: function () {
      let that = this;
      if (that.ztfx_icon == "static/images/comparisonOfChanges/ztfxF.png") {
        that.ztfx_icon = "static/images/comparisonOfChanges/ztfxT.png"
      } else {
        that.ztfx_icon = "static/images/comparisonOfChanges/ztfxF.png"
      }
    },

全程都是根据图片地址来进行判断的，定义一个变量为图片的地址，然后点击的时候改变这个变量的值，通过判断这个变量来进行元素的显隐

写的简洁，逻辑可能有点复杂，特此记录下

4.element ui table 更改样式

（1）修改鼠标悬浮表格颜色

.dbTable /deep/ tbody tr:hover > td {
  background-color: #1A7179 !important;
  color: white;
}

（2）表格头部颜色

<el-table :data="dbData" border style="width: 100%;background-color: #1A2A2D"
                  :header-cell-style="{background:'#01575F'}">
          <el-table-column v-for="(item,index) in dbTr" :prop="item.code" :key="index"
                           :label="item.label"></el-table-column>
        </el-table>

用到的是  :header-cell-style="{background:'#01575F'}"

（3）表格字体颜色，样式

.dbTable /deep/ .el-table th > .cell {
  text-align: center;
}

.dbTable /deep/ .el-table thead {
  color: #ffffff;
}

.dbTable /deep/ .el-table__empty-text {
  color: #ffffff;
}

.dbTable /deep/ .el-table td, .el-table th {
  text-align: center;
  background-color:#042830;
  color: white;
}

（4）修改表格边框颜色

.dbTable /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
  border-color: #01575F;
}
.dbTable /deep/ .el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: #01575F;
}

以上所有的 .dbTable 是包裹在table外的div的class 名称，不多叙述 

 

5.表格 行数列数不确定，循环表格

定义2个数组，一个循环列（即表头），一个循环行

循环列（即表头）

<el-table :data="dbData" border style="width: 100%"
                  :header-cell-style="{background:'#01575F'}">
          <el-table-column v-for="(item,index) in dbTr" :prop="item.code" :key="index"
                           :label="item.label"></el-table-column>
        </el-table>

dbTr: [
        {label: '土地类型', code: 'leixing'},
        {label: '变更(公顷)', code: 'biangengM'},
      ],
      dbData: [
        {leixing: '111', biangengM: '2222'},
        {leixing: '333', biangengM: '4444'},
      ]

其中表头的code要和行中数据的数组 key对应

6.element ui 表格 某一列根据内容修改样式

 

<el-table :cell-style="changeCell">

</el-table>

changeCell: function ({row, column, rowIndex, columnIndex}) {
      if (row.status == '在线' && columnIndex == 6) {   //在线
        return 'color: #67C23A;'
      } else if (row.status == '休眠' && columnIndex == 6) {
        return 'color: #F56C6C;'
      }
    },

el-table种有 cell-style 设置某一列的样式

 

7、echart 在vue中自适应 resize 

myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();});

myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});

8、echart X / Y 轴添加箭头

axisLine: {
              show: true,
              symbol:['none','arrow'],
              symbolOffset: 0,
              symbolSize: ['5', '5'],
            },

效果图：