vue ele editable

vue-ele-editable | Efficient, simple and powerful element-ui inline editing component

introduce

vue-ele-editable is an efficient, simple and powerful element-ui inline editing component. After referencing the component, the inline editing function can be completed only through data. The specific features are as follows:

• Supports a variety of built-in components: input, select, radio, checkbox, textarea, date, time, datetime, text, url, status, switch, image, upload-image, time-text, date-text, datetime-text, color, number
• Supports Popover and Inline modes
• Supports data verification, custom attributes, custom display data, and custom sending data
• Simple enough, only requires 1 line of html code and data

In order to help you better understand and use it, if the number of stars exceeds 100, there is a video source code explanation. I hope I can give you a star???

renderings

Online example

https://codepen.io/dream2023/pen/dBNNbP

Install

npm install vue-ele-editable --save

use

 import EleEditable from 'vue-ele-editable'
Vue . use ( EleEditable )

// 在引入 EleEditable 时，可以传入一个全局配置对象
// key 是组件名, value 是组件的属性, 例如:
Vue . use ( EleEditable , {
  // 所有 image 类型的组件都会有 lazy: true 的属性
  image : {
    lazy : true
  } ,
  // 所有的 number 类型的组件都会有 step: 10 的属性
  number : {
    step : 10
  } ,
  ...
} ) 

Props

Parameter overview

props: {
  // 类型
  type : {
    type : String ,
    default : 'text'
  } ,
  // 字段
  field : {
    type : String ,
    required : true
  } ,
  // 是否为行内
  inline : {
    type : Boolean ,
    default : false
  } ,
  // 标题
  title : String ,
  // 字段值
  value : [ String , Number , Boolean , Array , Date ] ,
  // 默认值
  defaultValue : {
    type : [ String , Number , Boolean , Array , Date ] ,
    default : null
  } ,
  // 自定义组件是否需要包裹
  isNoWrapper : {
    type : Boolean ,
    default : false
  } ,
  // 选项
  options : {
    type : Array ,
    default ( ) {
      return [ ]
    }
  } ,
  // 请求地址
  requestFn : Function ,
  // 校检规则
  rules : [ Array , Object ] ,
  // 其他附带数据
  customData : Object ,
  // 自定义属性
  customAttrs : Object ,
  // 格式化显示数据
  displayFormatter : Function ,
  // 对请求数据格式化
  valueFormatter : Function ,
  // 值空时显示的文本
  emptyText : {
    type : String ,
    default : '空'
  }
}

Parameter explanation

type:

type is used to specify rendering components. Currently supported built-in components are:

type	meaning	Property reference
text	static text
image	Single picture/multiple pictures	vue-ele-gallery
upload-image	Upload pictures	vue-ele-upload-image
input	Editable single line of text	element-ui input
textarea	Editable multi-line text	element-ui input
select	drop down box	element-ui select
number	Editable numbers	element-ui input-number
radio	Single choice	element-ui radio
checkbox	Multiple choice	element-ui checkbox
datetime	Editable date and time (accepts timestamp, string, Date type value)	element-ui datetime-picker
datetime-text	Non-editable date and time (accepted values ​​are the same as above)
date	Editable date (accepted values ​​are as above)	element-ui date-picker
date-text	Non-editable date (accepted values ​​are the same as above)
time	Editable time (accepted values ​​are the same as above)	element-ui time-picker
time-text	Non-editable time (accepted values ​​are the same as above)
status	state	element-ui tag
switch	switch	element-ui switch
url	Link
color	color	element-ui color-picker

When type is not any of the above types, it will be rendered according to the passed name. You can customize the extension component. For details, please refer to the custom extension example rate and the custom extension example slider. For specific expressions, please see the online example.

isNoWrapper:

isNoWrapper is used to define whether a custom component needs to be wrapped. For example, input is a wrapped component, switch means not to wrap the component. Whether the built-in component is wrapped or not cannot be changed. You can only change the custom component. For example, the rate component above is not wrapped, and slider component is not wrapped. It’s the package component

customAttrs:

customAttrs custom component attributes, for example, changing input into a password box:

 {
  type : 'input' ,
  // 属性参考 element-ui input组件
  customAttrs : {
    'show-password' : true
  }
}

field:

field is used to send requests as key of data, for example:

 {
  value: 'zhang'
  field: 'name'
}

// 最终发送的数据为:
{
  name : 'zhang'
}

inline:

inline is used to specify whether to use popover or inline mode. The default is popover .

title:

title used for the title of the pop-up window

value:

value value, can be bound with v-model

defaultValue:

defaultValue replaces value when value does not exist, for example:

 {
  value : '' ,
  field : 'name' ,
  defaultValue : '匿名'
}

// 最终显示到屏幕上为: 匿名

displayFormatter:

displayFormatter is used for further processing of value display, for example:

 // 伪代码
{
  value : 10 ,
  displayFormatter : function ( value ) {
    return ` ${ value } 岁`
  }
}

// 最终显示到屏幕上为: 10 岁

emptyText:

emptyText is used to display a string when there is no data, for example:

 {
  field : 'mobile' ,
  // 当 value, defaultValue 和 displayFormatter都返回空时, 才起作用
  value : '' ,
  defaultValue : '' ,
  displayFormatter : null ,
  emptyText : '无手机可用'
}

// 最终显示到屏幕上为: 无手机可用

options:

options are used for options of checkbox, radio, select, and status components, supporting object arrays and string arrays:

 // 对象数组形式 (text 用于展示, 实际值是 value)
options: [ { text : '男' , value : 'male' } , { text : '女' , value : 'female' } ]

// 字符串数组 (相当于 [{ text: '男', value: '男' }, { text: '女', value: '女' }])
options: [ '男' , '女' ]

requestFn:

requestFn request function, this function will eventually return a Promise example, which is used to determine the status and result of the request

There are two situations. One is that you need to process the response result of the original request, and you can apply a layer of Promise:

 // 伪代码
async function requestFn ( data ) {
  return new Promise ( ( resolve , reject ) => {
    try {
      const res = await axios . post ( '/post' , data )
      // 对res做各种处理
      . . .
      resolve ( )
    } catch ( e ) {
      reject ( e )
    }
  } )
}

Another method is that no processing is required and a Promise object can be returned directly.

 async function requestFn ( data ) {
  return axios . post ( '/post' , data )
}

rules:

rules are used for verification. The verification rules are the same as the form of element-ui. They all use async-validator and support both array and object forms. For example:

 // 对象
rules: {
  required : true ,
  message : '名称不能为空'
}

// 数组
rules: [
  { type : 'number' , message : '年龄必须填写数字' } ,
  { required : true , message : '年龄必填填写' }
]

customData:

customData is used to carry additional data, such as:

 // 伪代码

// props的值
{
  field : 'name' ,
  value : 'zhangchaojie' ,
  customData : {
    id : 10 ,
    status : 1
  }
}

// 最终发送的数据为:
{
  name : 'zhangchaojie' ,
  id : 10 ,
  status : 1
}

valueFormatter:

valueFormatter is used for further processing of request data, for example:

 // 伪代码

// props 值
field: 'age' ,
value : 10 ,
customData : { id : 1 } ,
valueFormatter : function ( value ) {
  return value + 1
}

// 最终发送的值为:
{
  age : 11 ,
  id : 1
} 

Reference link

• x-editable
• element-ui
• dolphinphp