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>