vue ele editable
1.0.0
vue-ele-editable é um componente de edição inline element-ui eficiente, simples e poderoso. Depois de referenciar o componente, a função de edição inline pode ser concluída apenas por meio de dados.
Para ajudá-lo a entender e utilizá-lo melhor, se o número de estrelas ultrapassar 100, há uma explicação do código-fonte do vídeo, espero poder lhe dar uma estrela???
https://codepen.io/dream2023/pen/dBNNbP
npm install vue-ele-editable --save 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: {
// 类型
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 : '空'
}
} type é usado para especificar componentes de renderização. Os componentes integrados atualmente suportados são:
| tipo | significado | Referência de propriedade |
|---|---|---|
| texto | texto estático | |
| imagem | Uma única foto/várias fotos | galeria vue-ele |
| upload de imagem | Carregar fotos | vue-ele-upload-image |
| entrada | Linha única de texto editável | entrada elemento-ui |
| área de texto | Texto editável de várias linhas | entrada elemento-ui |
| selecione | caixa suspensa | seleção de elemento-ui |
| número | Números editáveis | número de entrada do elemento-ui |
| rádio | Escolha única | rádio element-ui |
| caixa de seleção | Múltipla escolha | caixa de seleção element-ui |
| datahora | Data e hora editáveis (aceita carimbo de data/hora, string, valor do tipo data) | selecionador de data e hora element-ui |
| texto de data e hora | Data e hora não editáveis (os valores aceitos são os mesmos acima) | |
| data | Data editável (os valores aceitos são os acima) | selecionador de data element-ui |
| texto de data | Data não editável (os valores aceitos são os mesmos acima) | |
| tempo | Tempo editável (os valores aceitos são os mesmos acima) | selecionador de tempo element-ui |
| texto de tempo | Tempo não editável (os valores aceitos são os mesmos acima) | |
| status | estado | tag elemento-ui |
| trocar | trocar | opção elemento-ui |
| url | Link | |
| cor | cor | seletor de cores element-ui |
Quando type não for nenhum dos tipos acima, ele será renderizado de acordo com o nome passado. Você pode personalizar o componente de extensão. Para obter detalhes, consulte a taxa de exemplo de extensão personalizada e o controle deslizante de exemplo de extensão personalizada. veja o exemplo on-line.
isNoWrapper é usado para definir se um componente personalizado precisa ser empacotado. Por exemplo, a entrada é um componente empacotado, switch significa não envolver o componente. Se o componente integrado é empacotado ou não, você só pode alterar o. componente personalizado. Por exemplo, o componente rate acima não está agrupado e slider não está agrupado.
Atributos do componente customizado customAttrs , por exemplo, alterando a entrada em uma caixa de senha:
{
type : 'input' ,
// 属性参考 element-ui input组件
customAttrs : {
'show-password' : true
}
} field é utilizado para enviar solicitações como key de dados, por exemplo:
{
value: 'zhang'
field: 'name'
}
// 最终发送的数据为:
{
name : 'zhang'
} inline é usado para especificar se deve usar o modo popover ou inline . O padrão é popover .
title usado para o título da janela pop-up
valor value , pode ser vinculado ao v-model
defaultValue substitui value quando value não existe, por exemplo:
{
value : '' ,
field : 'name' ,
defaultValue : '匿名'
}
// 最终显示到屏幕上为: 匿名 displayFormatter é usado para processamento adicional de exibição de valor, por exemplo:
// 伪代码
{
value : 10 ,
displayFormatter : function ( value ) {
return ` ${ value } 岁`
}
}
// 最终显示到屏幕上为: 10 岁 emptyText é usado para exibir uma string quando não há dados, por exemplo:
{
field : 'mobile' ,
// 当 value, defaultValue 和 displayFormatter都返回空时, 才起作用
value : '' ,
defaultValue : '' ,
displayFormatter : null ,
emptyText : '无手机可用'
}
// 最终显示到屏幕上为: 无手机可用 options são usadas para opções de componentes de caixa de seleção, rádio, seleção e status, suportando matrizes de objetos e matrizes de strings:
// 对象数组形式 (text 用于展示, 实际值是 value)
options: [ { text : '男' , value : 'male' } , { text : '女' , value : 'female' } ]
// 字符串数组 (相当于 [{ text: '男', value: '男' }, { text: '女', value: '女' }])
options: [ '男' , '女' ] função de solicitação requestFn , esta função eventualmente retornará um exemplo Promise , que é usado para determinar o status e o resultado da solicitação
Existem duas situações. Uma é que você precisa processar o resultado da resposta da solicitação original e pode aplicar uma camada de Promessa:
// 伪代码
async function requestFn ( data ) {
return new Promise ( ( resolve , reject ) => {
try {
const res = await axios . post ( '/post' , data )
// 对res做各种处理
. . .
resolve ( )
} catch ( e ) {
reject ( e )
}
} )
} Outro método é que nenhum processamento é necessário e um objeto Promise pode ser retornado diretamente.
async function requestFn ( data ) {
return axios . post ( '/post' , data )
} rules são usadas para verificação. As regras de verificação são as mesmas do formulário element-ui. Todas elas usam validador assíncrono e suportam formulários de array e objeto.
// 对象
rules: {
required : true ,
message : '名称不能为空'
}
// 数组
rules: [
{ type : 'number' , message : '年龄必须填写数字' } ,
{ required : true , message : '年龄必填填写' }
] customData é usado para transportar dados adicionais, como:
// 伪代码
// props的值
{
field : 'name' ,
value : 'zhangchaojie' ,
customData : {
id : 10 ,
status : 1
}
}
// 最终发送的数据为:
{
name : 'zhangchaojie' ,
id : 10 ,
status : 1
} valueFormatter é usado para processamento adicional de dados de solicitação, por exemplo:
// 伪代码
// props 值
field: 'age' ,
value : 10 ,
customData : { id : 1 } ,
valueFormatter : function ( value ) {
return value + 1
}
// 最终发送的值为:
{
age : 11 ,
id : 1
} 
