Editable 可编辑 ​

<template>
  <el-editable :model-value="value" @change="handleChange">
    <el-input v-model="value" />
  </el-editable>
</template>

<script setup>
import { ref } from 'vue'
import { ElInput } from 'element-plus'
const value = ref('双击我试试')
const handleChange = (bool) => {
  console.log('是否编辑状态:', bool)
}
</script>

<template>
  <el-editable :model-value="value" trigger="click">
    <el-input v-model="value" />
  </el-editable>
</template>

<script setup>
import { ref } from 'vue'
import { ElInput } from 'element-plus'
const value = ref('单击我试试')
</script>

<template>
  <el-editable :model-value="value" trigger="icon" style="width: 320px">
    <el-input v-model="value" />
  </el-editable>
</template>

<script setup>
import { ref } from 'vue'
import { ElInput } from 'element-plus'
const value = ref('徐志伟')
</script>

<template>
  <el-editable
    :model-value="value"
    default-edit-state
    trigger="icon"
    @change="handleChange"
  >
    <el-date-picker
      v-model="value"
      type="date"
      placeholder="请选择"
      value-format="YYYY-MM-DD"
    />
    <template #icon>
      <el-icon color="red"><More /></el-icon>
    </template>
  </el-editable>
</template>

<script setup>
import { ref } from 'vue'
import { ElDatePicker, ElIcon } from 'element-plus'
import { More } from '@element-plus/icons-vue'

const value = ref('')
const handleChange = (bool) => {
  console.log('是否编辑状态:', bool)
}
</script>