vue this.$refs input 获取焦点
1.html<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script><div id="app"><el-tree :data="data...
1.html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
<el-tree :data="data" node-key="id" draggable default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }">
<el-input v-model="data.label" v-if="node.isEdit" @blur="editLabel(node,data)" :ref=`editLabelInput-${node.id}`></el-input>
<template v-else>
<span>{{ data.label }}</span>
<el-tooltip class="item" effect="dark" :open-delay="300" content="编辑" placement="top">
<el-button type="text" @click="edit(node,data)" icon="el-icon-edit-outline" circle></el-button>
</el-tooltip>
</template>
</span>
</el-tree>
</div>
2.js
var Main = {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
edit(node, data) {
console.log(node)
this.$set(node, 'isEdit', true)
this.$nextTick(() => {
this.$refs[`editLabelInput-${node.id}`].focus()
})
},
editLabel(node, data) {
this.$set(node, 'isEdit', false)
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
更多推荐
所有评论(0)