my crud
1.0.0
my-crud は、D2-Crud をベースに改変された vue テーブルコンポーネントで、簡単な追加、削除、変更フォームが含まれており、オリジナルのバージョンよりいくつかの機能が追加されています。
npmを使用する
npm i element-ui my-element-crud -Smain.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'
} ,
} ,組み込み選択ボックスのフォームデータ変更イベントが親コンポーネントに正しく渡せない問題を解決
カスタムビューボタンを追加
表示機能を追加。表示時に要素はデフォルトで無効になります。
カスタムコンポーネントを無効にするには、プロパティに「disabled: Boolean」を追加する必要があります。コンポーネント属性: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
}
}
