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