<template>
<div>
<el-table :data="tableData" border>
<el-table-column width="150" prop="name" label="姓名">
<template slot-scope="scope">
<div v-if="scope.row.isName">
<el-input
ref="customerInput"
v-model="scope.row.name"
@keyup.enter.native="onEditValue(scope.row)"
@blur="onEditValue(scope.row)"></el-input>
</div>
<div @dblclick="onNamedbClick(scope.row)" v-else>
<el-tooltip
v-if="!showTitle"
class="item"
effect="dark"
:content="scope.row.name"
placement="top">
<div class="toEllipsis" @mouseover="onShowTipsMouseenter">
{{ scope.row.name }}
</div>
</el-tooltip>
<div
class="toEllipsis"
@mouseover="onShowTipsMouseenter"
v-if="showTitle">
{{ scope.row.name }}
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
<div v-if="scope.row.isAddress">
<el-select
v-model="scope.row.address"
placeholder="请选择"
ref="address"
@blur="onEditValue(scope.row)"
@change="onEditValue(scope.row)">
<el-option
v-for="item in addressList"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</div>
<div @dblclick="onAddressdbClick(scope.row)" v-else>
<div>{{ scope.row.address }}</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
showTitle: false,
tableData: [
{
name: '王小虎王小虎王小虎王小虎',
address: '测试',
isName: false,
isAddress: false
},
{
name: '王小虎王小虎王小虎王小虎',
address: '测试',
isName: false,
isAddress: false
},
{
name: '王小虎王小虎王小',
address: '测试',
isName: false,
isAddress: false
}
],
addressList: [
{value: 1, label: '测试'},
{value: 2, label: '测试2'}
]
}
},
methods: {
onShowTipsMouseenter(e) {
console.log(e, 'eeeeee溢出隐藏')
var target = e.target
let textLength = target.clientWidth
let containerLength = target.scrollWidth
textLength < containerLength
? (this.showTitle = false)
: (this.showTitle = true)
},
onNamedbClick(row) {
row.isName = true
this.$nextTick(() => {
this.$refs.customerInput.$el.querySelector('input').focus()
})
},
onAddressdbClick(row) {
row.isAddress = true
this.$nextTick(() => {
this.$refs.address && this.$refs.address.focus()
})
},
onEditValue(row) {
row.isName = false
row.isAddress = false
}
}
}
</script>
<style lang="scss" scoped>
.toEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>