## 各种点击编辑

<br />

:::demo
```html

<template>
    <div>
        <ve-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                prop="typeName"
                label="类型"
                width="180">
            </el-table-column>
            <el-table-column
                prop="editData"
                label="组件"
                width="180">
                <template slot-scope="scope">
                    <ve-view-edit :typeData="scope.row.editData"></ve-view-edit>
                </template>
            </el-table-column>
        </ve-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: '',
                model: '100%',
                tableData: [
                    {
                        typeName: '输入框', editData: {
                            type: "input", model: "初始化", property: {type: 'input', maxlength: 24}, set(value, item) {
                                // item.model = value;
                                // return true;
                                // if (value.length > 5) {
                                item.model = value;
                                return true;
                                // } else {
                                //     return {msg:"校验失败"}
                                // }

                            }
                        }
                    },
                    {
                        typeName: '姓名输入框', editData: {
                            type: "input",
                            model: "初始化",
                            property: {type: 'input', maxlength: 24, enterType: 'userName'},
                            set(value, item) {
                                // item.model = value;
                                // return true;
                                // if (value.length > 5) {
                                item.model = value;
                                return true;
                                // } else {
                                //     return {msg:"校验失败"}
                                // }

                            }
                        }
                    },
                    {
                        typeName: '数字输入框', editData: {
                            type: "input", model: 132, property: {type: 'number'}, set(value, item) {
                                // item.model = value;
                                // return true;
                                if (value % 2 == 1) {
                                    item.model = value;
                                    return true;
                                } else {
                                    return {msg: "校验失败"}
                                }
                            }
                        }
                    },
                    {
                        typeName: '选择框', editData: {
                            type: "select", model: "132", defaultValue: "a", getData() {
                                return {a: '132', b: '456'}
                            }, set(value, item) {
                                // item.model = item.getLabel();
                                // item.defaultValue = value;
                                // return true;
                                if (value != item.defaultValue) {
                                    item.model = item.getLabel();
                                    item.defaultValue = value;
                                    return true;
                                } else {
                                    return {msg: "校验失败"}
                                }
                            }
                        }
                    },
                    {
                        typeName: '单选可搜索', editData: {
                            type: "filterSelect",
                            model: "启用",
                            property: {filterable: true},
                            defaultValue: "1",
                            getData() {
                                return {
                                    "1": '启用', "0": '禁用'
                                }
                            },
                            set(value, item) {
                                // item.model = item.getLabel();
                                // item.defaultValue = value;
                                // return true;
                                if (value != item.defaultValue) {
                                    item.model = item.getLabel();
                                    item.defaultValue = value;
                                    return true;
                                } else {
                                    return {msg: "校验失败"}
                                }

                            }
                        }
                    },
                    {
                        typeName: '搜索选择', editData: {
                            type: "remoteSelect", model: '暂无', defaultValue: null, property: {
                                "placeholder": "请输入自定义文字", "remoteMethod": function remoteMethod(item, query) {
                                    item.options = [{
                                        id: 111, name: '张三'
                                    }, {
                                        id: 112, name: '李四'
                                    }];
                                }
                            }, set(value, item) {
                                // item.model = item.getLabel();
                                // item.defaultValue = value;
                                // return true;
                                if (value != item.defaultValue) {
                                    item.model = item.getLabel();
                                    item.defaultValue = value;
                                    return true;
                                } else {
                                    return {msg: "校验失败"}
                                }
                            }
                        }
                    },
                    {
                        typeName: '标签', editData: {
                            type: "tag", model: {
                                labelColor: '#f00',
                                labelName: '标签名称11'
                            }, set(value, item) {
                                if (value && value.labelName.length > 0) {
                                    item.model = value;
                                    return true;
                                } else {
                                    return {msg: "标签名不能为空"}
                                }

                            }
                        }
                    },
                    {
                        typeName: '树状单选择', editData: {
                            type: "treeSelect", model: '', getData() {
                                return USSD.getProjectTree()
                            }, property: {
                                props: {
                                    label: 'name',
                                    value: 'id',
                                    children: 'children',
                                },
                                type: 'project',
                            }, set(value, item) {
                                if (value) {
                                    item.model = value;
                                    return true;
                                } else {
                                    return {msg: "内容不能为空"}
                                }

                            }
                        }
                    },
                    {
                        typeName: '树状多选择', editData: {
                            type: "treeCheckSelect", model: [], getData() {
                                return USSD.getProjectTree()
                            }, property: {
                                props: {
                                    label: 'name',
                                    value: 'id',
                                    children: 'children',
                                },
                                type: 'project',
                            }, set(value, item) {
                                if (value && value.length > 0) {
                                    item.model = value;
                                    return true;
                                } else {
                                    return {msg: "内容不能为空"}
                                }

                            }
                        }
                    },
                    {
                        typeName: '微信号', editData: {
                            type: "wxCode",
                            model: {value: '', label: ''},
                            property: {
                                getWxCode() {
                                    return "wxh"
                                }
                            },
                            set(value, item) {
                                if (value.value && value.label) {
                                    item.model = value;
                                    return true;
                                } else {
                                    return {msg: "校验失败"}
                                }
                            }
                        }
                    },
                    {
                        typeName: '选择输入', editData: {
                            type: "selectInput",
                            model: {value: '', label: ''},
                            property: {otherCode: 'O'},
                            getData() {
                                return {
                                    "2": '启用', "3": '禁用', 'O': "其他"
                                }
                            },
                            set(value, item) {
                                if (value.value && value.label) {
                                    item.model = value;
                                    return true;
                                } else {
                                    return {msg: "校验失败"}
                                }
                            }
                        }
                    },
                    {
                        typeName: '日期选择', editData: {
                            type: "datePicker", model: '2020-05-20', defaultValue: '2020-05-24', property: {
                                "placeholder": "请选择日期",
                            }, set(value, item) {
                                item.model = value;
                                item.defaultValue = value;
                                return true;
                            }

                        }
                    },
                    {
                        typeName: '年份选择', editData: {
                            type: "datePickerYear", model: '2020', property: {
                                "placeholder": "请选择年份",
                            }, set(value, item) {
                                item.model = value;
                                return true;
                            }
                        }
                    },

                ]
            }
        },
        created() {
        },
        methods: {}
    }
</script>
```

:::

### Attributes

| 参数      | 说明          | 类型      | 默认值  |
|---------- |-------------- |---------- |-------- |
| tableData     |  要显示的数据           | array |  — |
| typeName    | label名称          | String | — |
| editData     |  编辑数据<br/>  type: "",    // 编辑框类型 <br/>model: "",  //  默认值 数据类型不限<br/>getData(){}获取数据方法 <br/>set(value, item){}保存方法       | object |  — |
| property    |配置项 <br/>type:'project', // 树状数据类型  目前仅支持两种  project 项目、 area 地区 <br/>maxlength:24,最大长度          | object | — |