多个el-input编辑标题，每次只有一个可输入，其他隐藏
多个el-input编辑标题，每次只有一个可输入，其他隐藏
项目有一个需求，可以实现el-tab的标题可编辑，所以我加了一个el-input输入框，选择性展示，点击编辑的时候输入框打开
<el-input v-if="contenteditable" v-model="item.key" :placeholder="item.name" @blur="handleBlur"></el-input>
但是每次编辑打开的时候所有标题的输入框都开启，有没有办法每次只开启我点击编辑的那个输入框
有没有友友能帮忙看下！！谢谢啦
这是我的完整代码：
<template>
<div>
<el-tabs type="card" v-model="defaultValue">
<el-tab-pane v-for="item in tableList" :name="item.name" :key="item.key">
<span slot="label">
<span v-if="!contenteditable">{{ item.key }}</span>
<el-input v-if="contenteditable" v-model="item.key" :placeholder="item.name" @blur="handleBlur"></el-input>
<el-button type="text" size="small" v-if="!contenteditable" @click="handleEdit"><i class="el-icon-edit"></i></el-button>
<el-button type="text" size="small" v-if="contenteditable" @click="handleSave"><i class="el-icon-check"></i></el-button>
</span>
<el-row :gutter="20">
<el-col :span="6"
v-for="obj in item.value"
:key="obj.id"
class="preViewCard">
<el-card :body-style="{ padding: '0px' }">
<span style="display: block">{{ obj.name }}</span>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default{
data () {
return {
defaultValue: '1',
contenteditable: false,
tableList: [
{
key: '1',
name: '1',
value: [
{
id: 12,
name: 'card',
type: '1'
},
{
id: 13,
name: 'card',
type: '1'
},
{
id: 14,
name: 'card',
type: '1'
},
{
id: 15,
name: 'card',
type: '1'
}
]
},
{
key: '2',
name: '2',
value: [
{
id: 111,
name: 'card',
type: '2'
},
{
id: 121,
name: 'card',
type: '2'
},
{
id: 131,
name: 'card',
type: '2'
},
{
id: 141,
name: 'card',
type: '2'
}
]
}
]
}
},
created () {
},
methods: {
handleBlur () {
},
handleEdit () {
this.contenteditable = true
},
handleSave () {
this.contenteditable = false
}
}
}
</script>
1.在data中增加变量currentIndex: "", isEdit: false（是否编辑）;
2.在el-input标签中用v-if或者v-show来控制el-input是否展示
3.再点击编辑的时候，将defaultValue的值赋给currentIndex，isEdit置为true, 用来控制el-input标签是否展示，展示哪个。
大概就这个意思，自己改改吧
<template>
<div>
<el-tabs type="border-card">
<el-tab-pane v-for="(item, index) in tableList" :key="item.key">
<div slot="label">
<el-input
style="width: 100px"
v-model="item.key"
:disabled="disabled && checkedKey !== index"
></el-input>
<i
v-if="disabled && checkedKey !== index"
class="el-icon-edit"
@click="handleClickEdit(item, index)"
></i>
<i
v-else
class="el-icon-check"
@click="handleClickCheck(item, index)"
></i>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
disabled: true,
checkedKey: null,
tableList: [
{
key: "1",
name: "1",
value: [
{
id: 12,
name: "card",
type: "1",
},
{
id: 13,
name: "card",
type: "1",
},
{
id: 14,
name: "card",
type: "1",
},
{
id: 15,
name: "card",
type: "1",
},
],
},
{
key: "2",
name: "2",
value: [
{
id: 111,
name: "card",
type: "2",
},
{
id: 121,
name: "card",
type: "2",
},
{
id: 131,
name: "card",
type: "2",
},
{
id: 141,
name: "card",
type: "2",
},
],
},
],
};
},
methods: {
handleClickEdit(_, index) {
this.checkedKey = index;
this.isEdit = !this.isEdit;
},
handleClickCheck(item, index) {
this.checkedKey = null;
},
},
};
</script>
<style></style>
在此问题中，我们将创建一个只在初始显示的输入框。当用户选择或编辑其他输入框时，这些输入框将被隐藏。
首先，在Vue组件中，我们将使用v-if指令来检查是否有可编辑的输入框。如果有，我们将使用v-model指令将输入框的值绑定到组件的数据中。同时，我们将为输入框设置placeholder属性，以提供有关输入的有用上下文。
然后，我们将为每个可编辑的输入框添加一个blur事件监听器，以便在用户编辑输入框时隐藏其他输入框。我们还将为输入框设置@blur事件监听器，以便在输入框失去焦点时执行相应的操作。
以下是完整的Vue组件代码：
<template>
<div>
<el-tab v-model="activeTab" label="选项1">
<el-input v-if="contenteditable" v-model="item.key" :placeholder="item.name" @blur="handleBlur" @blur-native.native="handleBlur"></el-input>
</el-tab>
<el-tab v-model="activeTab" label="选项2">
<el-input v-if="contenteditable" v-model="item.key" :placeholder="item.name" @blur="handleBlur" @blur-native.native="handleBlur"></el-input>
</el-tab>
<el-tab v-model="activeTab" label="选项3">
<el-input v-if="contenteditable" v-model="item.key" :placeholder="item.name" @blur="handleBlur" @blur-native.native="handleBlur"></el-input>
</el-tab>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: '',
items: [
{ key: '1', name: '选项1' },
{ key: '2', name: '选项2' },
{ key: '3', name: '选项3' }
]
};
},
methods: {
handleBlur() {
this.activeTab = this.items[Math.floor(Math.random() \* this.items.length)];
}
}
};
</script>
- 这篇博客: el-input输入框要求校验后一个输入框的值大于前一个输入框的值中的 项目场景： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
要求实现以下校验：
