有个span标签，想在上面做点击事件，怎么扩大点击的区域

刚想到这个需求，本是想给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 // 下面剩余多少空白部分（即最下面距离底部有多少距离）
      }
    }
}

最后点击姓名周边的区域也可以实现点击事件啦！