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

最新推荐文章于 2025-03-04 16:05:16 发布

木木芳草

最新推荐文章于 2025-03-04 16:05:16 发布

阅读量1.9k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_44817180/article/details/107319213

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

其中操作按钮上的 @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;
                }
            },