antd+vue点击编辑⽂本切换成可编辑状态（附下拉框）
antd + vue 点击编辑⽂本切换成可编辑状态（附下拉框）
  最近写任务的时候遇到这样⼀个前端功能：
  默认展⽰⽂本和编辑图标，点击删除之后，⽂本的位置切换成输⼊框，如下所⽰：
  点击编辑图标之后
  我参照了的antd⽂档中table组件的⼀个可编辑单元格的例⼦，单独写⼀个组件，让它在内部控制⾃⼰的可编辑状态。
  组件：
<div v-if="editable" class="editable-cell-input-wrapper">
<a-input v-model="value" @pressEnter="check" />
<a class="c-theme" type="primary" @click="check">保存</a>
<a class="c-theme" @click="onCancel">取消</a>
</div>
<div v-else class="editable-cell-text-wrapper">
{{ value || " " }}
<a-icon
type="edit"
theme="twoTone"
:
class="editable-cell-icon"
@click="edit"
/>
</div>
  data内部的数据
data() {
return {
value: "",
editable: false,
preValue: ""
};
},
  控制事件
// 取消
onCancel() {
this.value = this.preValue;
this.editable = false;
},antdesignvue 配置外部文件
// 保存
check() {
this.editable = false;
}
// 点击编辑
edit() {
this.preValue = this.value;
this.editable = true;
}
  这就完成了，但是后⾯⼜要求加⼀个选择下拉框，再点击“编辑”图标时，输⼊框跟下拉框⼀起显⽰出来，点击“保存”或者“取消”时作相应处理，并切换成新的⽂本显⽰。
  我⼀开始是直接把下拉框加在外部组件⾥⾯的，结果控制它的可见状态⼗分⿇烦，所以⼲脆把它也加在之前的组件⾥，让下拉框和输⼊框组成⼀个单独的组件，同样⽤editable控制⽂本和编辑态的切换：
<template>
<div class="editable-cell">
<div
class="editable-cell-select-text-wrapper"
v-if="!editable"
>
{{ selectedTitle}}
</div>
<div class="editable-cell-select-wrapper" v-if="editable">
<a-select v-model="selectedLan">
<a-select-option
:value="option.language"
v-for="(option, index) in languages"
:key="index"
>
{{ languages.length > 0 ? option.title : "" }}
</a-select-option>
</a-select>
</div>
<div v-if="editable" class="editable-cell-input-wrapper">
<a-input v-model="value" @pressEnter="check" />
<a class="c-theme" type="primary" @click="check">保存</a>
<a class="c-theme" @click="onCancel">取消</a>
</div>
<div v-else class="editable-cell-text-wrapper">
{{ value || " " }}
<a-icon
type="edit"
theme="twoTone"
:
class="editable-cell-icon"
@click="edit"
/>
</div>
</div>
</template>
  data
data() {
return {
selectedLan: "",
value: "",
editable: false,
preValue: "",
preSelected: "",
languages: [
{language: 'zh', title: '中⽂'},
{language: 'en', title: '英⽂'},
{language: 'ja', title: '⽇⽂'}
]
};
},
  ⽅法
check() {
this.editable = false;
}
},
onCancel() {
this.value = this.preValue;
this.selectedLan = this.preSelected;
this.editable = false;
},
edit() {
this.preValue = this.value;
this.preSelected = this.selectedLan;
this.editable = true;
}
  selectedTitle 是通过计算属性得到的，select-option的value值绑定的是languages的每⼀项的language属性，即“zh、en、ja”，但⽂本我们要显⽰被选中的languages项的title属性，所以需要遍历⼀遍languages，到对应的⼀项，拿到他的title值：
computed: {
selectedTitle() {
if (this.languages.length > 0 && this.selectedLan) {
const choosen = this.languages.filter(
(item) => item.language == this.selectedLan
return choosen.title;
}
return "";
},
},
　样式
<style scoped>
a {
margin: 5px;
}
.editable-cell {
margin: 0 10px;
}
.editable-cell-select-wrapper {
margin: 0 15px;
}
.editable-cell-select-text-wrapper {  margin: 0 20px;
}
.editable-cell,
.editable-cell-input-wrapper,
.
editable-cell-text-wrapper,
.editable-cell-select-wrapper,
.editable-cell-select-text-wrapper, .ant-input,
.ant-select {
display: inline-block;
}
.anticon {
margin: 0 5px;
vertical-align: middle;
}
.ant-input {
width: 150px;
margin: 0 5px;
}
.ant-select {
width: 80px;
}
</style>

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