npm package: @qingbing/ts-v3-cell-edit
Description: 以 vue3 + element-plus 为基础, 封装的单个元素维护组件
Author: qingbing
Latest version: 2.0.7

# CellEdit 插件介绍

- [CellEdit 插件介绍](#celledit-插件介绍)
  - [1. 概要说明](#1-概要说明)
    - [1.1 地址](#11-地址)
    - [1.2 插件描述](#12-插件描述)
    - [1.3 重要依赖](#13-重要依赖)
    - [1.4 插件安装](#14-插件安装)
  - [2. 包说明](#2-包说明)
    - [2.1 属性说明](#21-属性说明)
    - [2.2 事件说明](#22-事件说明)
    - [2.3 实例暴露说明](#23-实例暴露说明)
  - [3. 示例](#3-示例)
    - [3.1 全局注册使用](#31-全局注册使用)
    - [3.2 模板组件使用](#32-模板组件使用)

## 1. 概要说明
### 1.1 地址

[https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-cell-edit](https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-cell-edit)

### 1.2 插件描述

vite + ts + vue3 + element-plus 为基础封装的 CellEdit 插件, 主要用于表格编辑等

### 1.3 重要依赖

- @qingbing/ts-v3-utils: ^1.0.1
- element-plus: ^2.6.2
- vue: ^3.4.21

### 1.4 插件安装

```bash
# yarn 安装
yarn add @qingbing/ts-v3-cell-edit

# npm 安装
npm i @qingbing/ts-v3-cell-edit
```

## 2. 包说明

### 2.1 属性说明

| 属性名     | 类型                      | 是否必需 | 默认值    | 意义                                         |
| :--------- | :------------------------ | :------- | :-------- | :------------------------------------------- |
| modelValue | [Boolean, Number, String] | 是       | -         | 编辑的初始信息                               |
| type       | String                    | 是       | -         | 编辑类型: text,number,textarea,switch,select |
| editable   | Boolean                   | 否       | true      | 是否可编辑, false表示纯显示                  |
| ops        | Object                    | 否       | {}        | 组件需要的额外参数, 在 switch, select 中有效 |
| params     | Object                    | 否       | {}        | 回调函数额外携带的参数                       |
| callSave   | Function                  | 否       | undefined | 保存数据的方法, 务必定义, 否则编辑将无意义   |

### 2.2 事件说明

| 事件名 | 类型 | 意义 |
| :----- | :--- | :--- |
| -      | -    | -    |

### 2.3 实例暴露说明

| 属性名 | 类型 |
| :----- | :--- |
| -      | 无   |

## 3. 示例
### 3.1 全局注册使用

- 一旦注册， `CellEdit` 作为组件全局通用 
- 使用方法参考 [3.2 模板组件使用](#32-模板组件使用), 去掉组件导入的语句即可

```ts
// main.ts
import { CellEditPlugin } from '@qingbing/ts-v3-cell-edit'
app.use(CellEditPlugin, {
  name: 'CellEdit',
  options: {}
})
```

### 3.2 模板组件使用

```vue
<template>
    <el-form label-width="200px" style="max-width: 600px">
        <el-divider>SWITCH</el-divider>
        <el-form-item :label="'Switch Bool(' + switchBool + ')'">
            <CellEdit v-model="switchBool" type="switch" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item :label="'Switch Number(' + switchNumber + ')'">
            <CellEdit v-model="switchNumber" type="switch" :editable="editable" :call-save="saveFailure" />
        </el-form-item>
        <el-form-item label="object switch1">
            <CellEdit v-model="res.switchBool1" type="switch" :editable="editable" :call-save="saveFailure" />
        </el-form-item>
        <el-form-item label="object switch2">
            <CellEdit v-model="res.switchBool2" type="switch" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item label="object switch3">
            <CellEdit v-model="res.switchBool3" type="switch" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>

        <el-divider>TEXT</el-divider>
        <el-form-item :label="'Text:(' + textSuccess + ')'">
            <CellEdit v-model="textSuccess" type="text" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item :label="'Text:(' + textFailure + ')'">
            <CellEdit v-model="textFailure" type="text" :editable="editable" :call-save="saveFailure" />
        </el-form-item>
        <el-form-item label="Object Success">
            <CellEdit v-model="res.textSuccess" type="text" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item label="Object Failure">
            <CellEdit v-model="res.textFailure" type="text" :editable="editable" :call-save="saveFailure" />
        </el-form-item>

        <el-divider>NUMBER</el-divider>
        <el-form-item :label="'Number:(' + numberSuccess + ')'">
            <CellEdit v-model="numberSuccess" type="number" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item :label="'Number:(' + numberFailure + ')'">
            <CellEdit v-model="numberFailure" type="number" :editable="editable" :call-save="saveFailure" />
        </el-form-item>
        <el-form-item label="Object Success">
            <CellEdit v-model="res.numberSuccess" type="number" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item label="Object Failure">
            <CellEdit v-model="res.numberFailure" type="number" :editable="editable" :call-save="saveFailure" />
        </el-form-item>

        <el-divider>TEXTAREA</el-divider>
        <el-form-item :label="'Textarea:(' + textareaSuccess + ')'">
            <CellEdit v-model="textareaSuccess" type="textarea" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item :label="'Textarea:(' + textareaFailure + ')'">
            <CellEdit v-model="textareaFailure" type="textarea" :editable="editable" :call-save="saveFailure" />
        </el-form-item>
        <el-form-item label="Object Success">
            <CellEdit v-model="res.textareaSuccess" type="textarea" :editable="editable" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item label="Object Failure">
            <CellEdit v-model="res.textareaFailure" type="textarea" :editable="editable" :call-save="saveFailure" />
        </el-form-item>

        <el-divider>SELECT</el-divider>
        <el-form-item :label="'Select:(' + selectSuccess + ')'">
            <CellEdit v-model="selectSuccess" type="select" :editable="editable" :ops="{
                options: {
                    'beijing': '北京',
                    'shanghai': '上海',
                    'chengdu': '成都',
                }
            }" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item :label="'Select:(' + selectFailure + ')'">
            <CellEdit v-model="selectFailure" type="select" :editable="editable" :ops="{
                options: {
                    'beijing': '北京',
                    'shanghai': '上海',
                    'chengdu': '成都',
                }
            }" :call-save="saveFailure" />
        </el-form-item>
        <el-form-item label="Object Success">
            <CellEdit v-model="res.selectSuccess" type="select" :select-use-empty="true" :editable="editable" :ops="{
                options: {
                    'beijing': '北京',
                    'shanghai': '上海',
                    'chengdu': '成都',
                }
            }" :call-save="saveSuccess" />
        </el-form-item>
        <el-form-item label="Object Failure">
            <CellEdit v-model="res.selectFailure" type="select" :select-use-empty="true" :editable="editable" :ops="{
                options: {
                    'beijing': '北京',
                    'shanghai': '上海',
                    'chengdu': '成都',
                }
            }" :call-save="saveFailure" />
        </el-form-item>

        <el-form-item>
            <el-button @click="handleSwitchEditable">切换编辑状态 {{ editable }}</el-button>
        </el-form-item>
    </el-form>
    <hr>
    <p>{{ res }}</p>
</template>

<script lang="ts" setup>
import "@qingbing/ts-v3-cell-edit/dist/style.css";
import type { TCellEditCallSave } from "@qingbing/ts-v3-cell-edit";
import { CellEdit } from "@qingbing/ts-v3-cell-edit";
import { reactive, ref } from 'vue'
import { ExMessage } from "@qingbing/ts-v3-element-plus";

// 对象属性传递
const res = reactive({
    switchBool1: 1,
    switchBool2: 1,
    switchBool3: true,
    textSuccess: "success",
    textFailure: "failure",
    numberSuccess: 1,
    numberFailure: 0,
    textareaSuccess: "success",
    textareaFailure: "failure",
    selectSuccess: "shanghai",
    selectFailure: "shanghai",
})
// 控制是否可编辑
const editable = ref(true)
const handleSwitchEditable = () => {
    editable.value = !editable.value
}
// switch
const switchBool = ref(true)
const switchNumber = ref(1)
// text
const textSuccess = ref("success")
const textFailure = ref("failure")
// number
const numberSuccess = ref(1)
const numberFailure = ref(0)

// textarea
const textareaSuccess = ref("success")
const textareaFailure = ref("failure")

// select
const selectSuccess = ref("shanghai")
const selectFailure = ref("shanghai")

// 保存成功函数示例
const saveSuccess: TCellEditCallSave = (callback: (status?: boolean) => void,
    value: any,
    params: any
) => {
    ExMessage.success("哦业,保存成功了")
    console.log(value, params);
    callback(true)
}

// 保存失败函数示例
const saveFailure: TCellEditCallSave = (callback: (status?: boolean) => void,
    value: any,
    params: any
) => {
    ExMessage.error("哦河,保存失败了")
    console.log(value, params);
    callback(false)
}
</script>
```