my crud
1.0.0
my-crud는 D2-Crud를 기반으로 수정된 vue 테이블 컴포넌트로, 간단한 추가, 삭제, 수정 형태가 포함되어 있으며, 원본 버전보다 일부 기능이 추가되었습니다.
npm 사용
npm i element-ui my-element-crud -S main.js 에 다음 내용을 작성하세요.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from 'my-element-crud'
Vue . use ( ElementUI )
Vue . use ( D2Crud )
new Vue ( {
el : '#app' ,
render : h => h ( App )
} ) 그런 다음 프로젝트에서 D2-Crud 사용할 수 있습니다.
외부: D2Crud
https://cdn.d2.pub/packages/@d2-projects/[email protected]/d2-crud.js
custom: [
{
text : '更多' ,
type : 'text' ,
// size: 'small',
sort : 8 ,
emit : 'custom-edit' ,
show : ( index , row ) => true ,
more : [
{
text : '!!!!!' ,
emit : 'custom-pop' ,
show : ( index , row ) => true
}
]
}
] mycom2 : {
title : "自带选择框" ,
value : "" ,
_sort : 4 ,
component : {
name : "el-select" ,
options : [
{ label : "测试1" , value : 1 } ,
{ label : "测试2" , value : 2 } ,
] ,
// 事件绑定
'@change' : ( e ) => {
console . log ( this . rowHandle ) ;
} ,
// 属性绑定
':size' : 'mini'
} ,
} ,내장 선택 상자의 form-data-change 이벤트가 상위 컴포넌트에 올바르게 전달되지 않는 문제 해결
사용자 정의 보기 버튼 추가
보기 기능 추가, 보기 시 요소는 기본적으로 비활성화됩니다.
비활성화된 사용자 정의 구성 요소는 비활성화된 항목을 추가해야 합니다. 소품에 부울 구성 요소 속성을 작성합니다: :disabled="disabled"
사용:
< d2-crud v-bind : look-template = "addTemplate" > </ d2-crud >
rowHandle: {
look : {
text : "查看" ,
emit : "lookHandle"
} ,
}사용자 정의 버튼 정렬 기능 추가
사용:
rowHandle: {
minWidth : "180px" ,
look : {
text : "查看" ,
emit : "lookHandle" ,
sort : 3
} ,
customs : [ {
text : '打卡记录' ,
emit : 'showRecord' ,
sort : 2
} ] ,
edit : {
text : "编辑" ,
emit : "editHandle" ,
type : "warning " ,
sort : 1
} ,
}rowHandle: {
lookNoEle : {
text : "查看" ,
emit : "lookHandle"
} ,
} mycom : {
title : "选择框" ,
value : "" ,
component : {
name : testCom ,
formatter ( val ) {
return val === 1 ? "测试1" : "测试2" ;
} ,
props : {
options : [
{ label : "测试1" , value : 1 } ,
{ label : "测试2" , value : 2 }
]
}
}
} , roleName : {
title : "角色名" ,
value : "" ,
class : "my_label" ,
component : {
placeholder : " 仅可输入英文大小写、数字"
}
} ,-- 동적 표시 및 숨겨진 양식 양식 추가
roleName : {
title : "角色名" ,
value : "" ,
class : "my_label" ,
component : {
show : this . show === 1
placeholder : " 仅可输入英文大小写、数字"
}
} ,양식 대화상자의 너비를 설정합니다: add-width="400px" :edit-width="400px"
=======
상위 구성요소
< d2-crud
@componentEvent:coma =" handle " >
</ d2-crud > computed : {
addTemplate ( ) {
return {
coma : {
title : "自定义选择框a" ,
value : "" ,
component : {
name : coma ,
} ,
} ,
comb : {
title : "自定义选择框b" ,
value : "" ,
component : {
name : comb ,
} ,
} ,
}
} ,
method : {
handle ( data ) {
this . $refs . d2Crud . getRef ( "comb" ) . handleComponentEvent ( data ) ;
} }성분 A
<template>
<div>
<el-button @click="up">up123</el-button>
</div>
</template>
up() {
this.$emit("componentEvent", 123);
}
성분 B
methods: {
handleComponentEvent ( data ) {
this . data = data
}
}
