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="ark"
        size="small">{{remark}}
      </el-input>
</el-tooltip>
在table中使⽤input
<el-table
:
data="paramsList"
border
size="small" >
<el-table-column
show-overflow-tooltip
input标签placeholder属性prop="remark"
header-align="center"
label="备注">
<template slot-scope="scope">
<el-tooltip
placement="top"
:
open-delay="500"
:content="ark"
:disabled="isShowTooltip"
>
<span>
<el-input ref="paramsListRemark"
@input="onInputRemark(0)"
v-model.lazy="ark"
size="small">{{dRemark}}</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。