element组件中input框添加tooltip

　　为给一个表格对应的input框添加tooltip文字提示，需要理解input、tooltip，以下我们先简单介绍一下这两个组件。

input，应当处理 input 事件，并更新组件的绑定值（或使用v-model）

<el-input v-model="input" placeholder="请输入内容" @input="onInputRemark()" size="small"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

tooltip，常用于展示鼠标 hover 时的提示信息。

<el-tooltip content="Top center" placement="top">
  <el-button>Dark</el-button>
</el-tooltip>

input与tooltip结合使用时，是为了展示input输入的内容超出input宽度时使用tooltip显示input框里面的内容，此时内容是动态变化的，为此content属性前需要添加冒号进行动态绑定。

<el-tooltip
　　　　placement="top"
　　　　:open-delay="500"
　　　　:content="remark"
　　　　:disabled="isShowTooltip"
　　　　>
　　　　　　<el-input ref="paramsListRemark"
　　　　　　　　@input="onInputRemark(0)"
　　　　　　　　v-model.lazy="scope.row.remark"
　　　　　　　　size="small">{{remark}}
　　　　　　</el-input>
</el-tooltip>

在table中使用input

<el-table
  :data="paramsList"
  border
  size="small" style="width: 100%">

        <el-table-column
                show-overflow-tooltip
                prop="remark"
                header-align="center"
                label="备注">
                <template slot-scope="scope">
                  <el-tooltip
                    placement="top"
                    :open-delay="500"
                    :content="scope.row.remark"
                    :disabled="isShowTooltip"
                  >
                    <span>
                      <el-input ref="paramsListRemark"
                                @input="onInputRemark(0)"
                                v-model.lazy="scope.row.remark"
                                size="small">{{scope.row.needRemark}}</el-input>
                    </span>
                  </el-tooltip>
                </template>
        </el-table-column>
</el-table>

添加span的原因是因为input数据中原本存在数据时，输入框输入时没反应，点击别的操作后数据才进去，原因是数据没有实时更新，此时需要在input时间中对事件进行实时更新。在每次赋值之后对表格内容进行更新。

<script> export default { data () { return { remark:'', 　　　　　　　　　 isShowTooltip:false, } },
　　　　　methods:{
　　　　　　　onInputRemark() {
　　　　　　　　　　this.paramsList = JSON.parse(JSON.stringify(this.paramsList));
　　　　　　　}

　　　　　},
    }
</script>