el-table给某一行加title,图片hover的替换

其中操作按钮上的 @click.stop 是阻止点击该按钮时,导致触发rowClick事件。
<el-table
          :data="tableData"
          class="vo-ui madify-ui"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
          ref="fileTable"
          :row-style="{'cursor':'pointer'}"
        >
          <el-table-column
            type="selection"
            width="40">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="fileName"
            label="文件名称">
            <template slot-scope="scope">
              <svg class="icon vertical-middle file-icon-class" aria-hidden="true" slot="reference">
                <use :xlink:href="common.getIcon(common.getType(scope.row.fileName))"></use>
              </svg>
                <div class=" text-overflow dis-in-block vertical-middle" style="width:calc(100% - 30px)">
                  <span :title="scope.row.fileName">{{scope.row.fileName}}</span>
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="personName"
            width="80px"
            label="上传人">
          </el-table-column>
          <el-table-column
            prop="endTime"
            width="150px"
            label="最后编辑时间">
            <template slot-scope="scope">
              <span>{{getTimeDate(scope.row.updateTime)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="90px"
            label="操作">
            <template slot-scope="scope">
              <span>
                <img @mouseover="detailIconMouseover(scope.row,'downloadHover')"  class="icon-img" v-if="!scope.row.downloadHover" src="../../assets/images/download_icon.png" @click.stop @click="downFile(scope.row)"   title="下载">
                <img @mouseleave="detailIconMouseleave(scope.row,'downloadHover')" class="icon-img" v-else src="../../assets/images/download_icon_active.png" @click.stop @click="downFile(scope.row)"   title="下载">
              </span>
              <span class="pl-10">
                <img @mouseover="detailIconMouseover(scope.row,'deleteHover')"  class="icon-img" v-if="!scope.row.deleteHover" src="../../assets/images/delete_icon.png" @click.stop @click="deleteFile(scope.row)"   title="删除">
                <img @mouseleave="detailIconMouseleave(scope.row,'deleteHover')" class="icon-img" v-else src="../../assets/images/delete_icon_active.png" @click.stop @click="deleteFile(scope.row)"   title="删除">
              </span>
             <!-- <i class="iconfont ic-download icon-hover" @click.stop @click="downFile(scope.row)"   title="下载"></i>
              <i class="el-icon-delete pl-10 icon-hover" @click.stop @click="deleteFile(scope.row)"  title="删除"></i>-->
            </template>
          </el-table-column>
        </el-table>
在获取数据的方法中:

 this.$nextTick(()=>{
                    if(this.$refs.fileTable){
                        this.$refs.fileTable.$el.children[2].title="点击预览"//整行的title
                    }
                })
              
在methods:方法中:
  detailIconMouseover(row, propName) {//鼠标移入与移出
                this.$set(row,propName,true)
            },
            detailIconMouseleave(row, propName) {鼠标移入与移出
                this.$set(row,propName,false)
            },

按钮里面加图片:hover与选中的时候换切图

<el-button plain size="small" class="vo-ui opration-file-button" @click="downSeletion" @focus.native="iconMouseover('downHover','downFocus',)" @mouseover.native="iconMouseover('downHover')"
                       @mouseleave.native="iconMouseleave('downHover','downFocus',false)" @blur.native="iconMouseleave('downHover','downFocus',true)">
               <span>
                <img   class="icon-img" v-if="!downHover" src="../../assets/images/download_icon.png" >
                <img class="icon-img" v-else src="../../assets/images/download_icon_active.png">
              </span>
             下载所选<span v-if="multipleSelection.length>0">({{multipleSelection.length}})</span>
            </el-button>
methods:方法中
 iconMouseover(hoverName,focusName){//icon的fucus及hover
                if(focusName){
                    this[focusName]=true;
                }
                this[hoverName]=true;
            },
            iconMouseleave(hoverName,focusName,isBlur){//icon的leave及blur
                if(isBlur){
                    this[focusName]=false;
                }
                if(!this[focusName]){
                    this[hoverName]=false;
                }
            },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table的fixed属性和hover效果可以通过以下样式实现: 当table没有fixed属性时,可以使用以下样式来实现hover效果: .el-table__body .el-table__row.hover-row td { background-color: #fff !important; } 当table了fixed属性时,可以使用以下样式来实现hover效果: .el-table tbody tr:hover > td { background: #fff !important; } 另外,如果想要更精确地设置hover的颜色,可以使用以下样式: .el-table tbody tr:hover > td { background-color: #颜色; } 或者 .el-table__body-wrapper tbody tr:hover > td { background-color: #颜色; } 以上是el-table fixed属性和hover效果的实现方法。希望对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [element 表格el-table改变hover背景颜色(fixed)](https://blog.csdn.net/weixin_63621456/article/details/125994643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改,添fixed后颜色又出现问题](https://blog.csdn.net/qq_47703624/article/details/114435077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值