关于element-ui中使用table表格相关问题

关于element-ui中使用table表格相关问题

1.hover某一行时修改背景颜色
可引入固定代码

.el-table--enable-row-hover {
    
    
  .el-table__body tr:hover > td {
    
    
    background: #E6FFF7;//这里写你想切换的颜色
  }
}`

2. 固定表头
当你的表格某一行需要hover或者active增加一定的样式或效果时，你会发现样式效果加上后，表头就算是固定宽度，但是还是会出现不断闪烁，这时候可在 总css文件里面 加上这段固定代码去控制

//固定表头
 .el-table th.gutter{
    
    
  display: table-cell!important;
}

.el-table colgroup.gutter{
    
    
  display: table-cell!important;
}

3. 对于有多选框的表格，需要勾选某行，就修改其背景颜色
如图：

//html中
  <el-table
    :data="tableData"
     style="width: 100%"
     @selection-change="handleSelectionChange"//获取点击的那一行的数据
     :row-style="rowClass"//设置单行样式
   >
//声明两个数组用来存储取出来的数据
 data() {
    
    
  return {
    
    
      selectRow: [],
      selectData: [],
     }
 }
//mothods中
    //click每一行函数---获取数据
    handleSelectionChange(data) {
    
    
      this.selectData = data;
    }, 
    // 修改样式
    rowClass({
    
     row, rowIndex }) {
    
    
      if (this.selectRow.includes(rowIndex)) {
    
    
        return {
    
     "background-color": "#E6FFF7" };
      }
    },
 //watch中监听点击行数据变化
  watch: {
    
    
    selectData(data) {
    
    
      this.selectRow = [];
      if (data.length > 0) {
    
    
        data.forEach((item, index) => {
    
    
          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    },
  },

4. hover某一行，动态修改某一行的文本信息

//html中
<el-table
        :data="tableData"
        style="width: 100%"
        @cell-mouse-enter="handleMouseEnter"//鼠标移入事件
        @cell-mouse-leave="handleMouseLeave"//鼠标移出事件
      >
        <el-table-column label="账号状态" width="300" :key="itemkey">//这里绑定key值是为了避免改一行的值引发了修改所有行的值
           <template slot-scope="scope">
          <div v-if="enable==scope.row.id">//用唯一的id修改显示和隐藏
            <span class="edit">编辑</span>
            <span class="disable">禁用</span>
            <span class="delete">删除</span>
          </div>
          <div v-else>启用</div>
           </template>
        </el-table-column>

  //mothods中hover单元格函数
  handleMouseEnter: function (row, event) {
    
    
    this.itemkey = Math.random();//这里的key值给随机数
    this.showFunction = row.id;//这里绑定唯一的id
  },
  handleMouseLeave: function (row, event) {
    
    
    this.itemkey = Math.random();
    this.showFunction = 0;
  },