刚想到这个需求,本是想给span添加宽高,但是span是行内元素,不能设置宽高。
就通过设置span标签的padding 把它撑大,但是前面的icon图标就会挤下来,就把icon图标设置为绝对定位,通过left,top设置位置,就解决了。
<el-table :data="List" @row-click="rowClick" :height="tableConfig.height">
<el-table-column type="index" label="#">
</el-table-column>
<el-table-column prop="NAME" width="150" label="姓名" style="position:relative;" >
<template slot-scope="scope">// icon图标
<i @dblclick="rowDlbClick(scope.row)" class="el-icon-user-solid solid_icon"></i>
// 用户名称<span @dblclick="rowDlbClick(scope.row)" class="user_span"> {{scope.row.NAME}}</span>
</template>
</el-table-column><el-table>
</el-table>
.user_span {
user-select:none;
display: block;
padding: 12px 16px;
}
.solid_icon {
position: absolute;
top: 27px;
left: 10px;
}
ps: 顺便说一下,el-table固定表头的操作,设置height可以固定表头,下面的内容有滚动条,根据页面来设置宽度:
data () {
return {
tableConfig: {
isLoading: true,
height: window.innerHeight - 200 // 下面剩余多少空白部分(即最下面距离底部有多少距离)
}
}
}
最后点击姓名周边的区域也可以实现点击事件啦!