There is a span tag. If you want to do click events on it, how can you expand the click area

Just thought of this demand , I wanted to span Add width and height , however span It's an in-line element , Width and height cannot be set .

By setting span Labeled padding Hold it up , But in front icon The icon will squeeze down , Just put icon The icon is set to absolute positioning , adopt left,top Set location , It's settled. .

        

<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=" full name " style="position:relative;" >
                <template slot-scope="scope">

                   // icon Icon
                  <i @dblclick="rowDlbClick(scope.row)" class="el-icon-user-solid solid_icon"></i>
                    // User name                   

                  <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： By the way ,el-table Fixed header operation , Set up height The header can be fixed , The following content has scroll bars , Set the width according to the page ：

data () {
    return {
      tableConfig: {
        isLoading: true,
        height: window.innerHeight - 200 //  How many blanks are left below （ That is, how far is the bottom from the bottom ）
      }
    }
}

Finally, clicking on the area around the name can also realize the click event ！