d2-crud-plus 的常用操作
1、去掉搜索栏
// 去掉搜索栏
searchOptions: {
disabled: true,
show: null
},
2、操作列
2.1、隐藏操作列
rowHandle: false,
2.2、操作按钮下拉框
rowHandle: {
width: 300,
dropdown: {
atLeast: 2 // 至少2个以上才收入下拉框中
text: '更多'
},
view: { show: false },
edit: { show: false },
remove: { show: false },
},
2.3、操作按钮配置
view:{ // 配置false，隐藏按钮
thin: false, // 瘦模式，thin=true 且 text=null 可以设置方形按钮节省位置
text: '查看', // 按钮文字， null = 不显示文字，↓↓↓↓也可以传入一个方法↓↓↓↓
// text(scope){ return 'xx' }
type: 'warning', // 按钮类型
icon: 'el-view', // 按钮图标，↓↓↓↓也可以传入一个方法↓↓↓↓
// icon(scope){ return 'xx' }
size: 'small', // 按钮大小
circle: false,// 圆形按钮 ，需要thin=true,且text=null
show: true, // 是否显示按钮，↓↓↓↓也可以传入一个方法根据数据决定该按钮是否显示↓↓↓↓↓↓↓↓
// show(index,row){return row.status==='xxx'}
disabled: false, // 是否禁用，↓↓↓↓也可以传入一个方法根据数据决定该按钮是否禁用↓↓↓↓
// disabled(index,row){return row.status==='xxx'}
order: 1 // 排序号，数字小，排前面
},
2.4、自定义按钮
rowHandle: {
width: 120,
view: { show: false },
edit: { show: false },
remove: { show: false },
custom: [
{
text: '购买',
type: 'danger',
size: 'small',
emit: 'buyNftBtn',
icon: 'el-icon-shopping-bag-1',
show(index, row) { return row.market_status === 1 },
disabled(index, row) { return row.market_status !== 1 },
order: 1
}
]
},
绑定自定义按钮事件
<d2-crud-x
ref="d2Crud"
v-bind="_crudProps"
v-on="_crudListeners"
@buyNftBtn="buyNftBtn"
>
<div slot="header">
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" />
<el-button-group>
<el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus" /> 新增 </el-button>
</el-button-group>
<crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners" />
</div>
</d2-crud-x>
3、字典
3.1 远程请求字典
{
title: '类型',
key: 'category',
type: 'select',
width: 100,
sortable: true,
dict: {
url: '/categories/dicts',
getData(url, dict) {
return request({
url: url,
method: 'get',
baseURL: process.env.VUE_APP_DRAW_BASE_API
}).then(ret => {
return ret.data
})
},
// cache: false, // 默认开启缓存
value: 'category_value',
label: 'category_label'
},
component: {
props: { color: 'auto' },
name: 'values-format'
}
},
注意：字典需要配合 component 使用，不写 component 字典可能显示不出来
3.2、本地字典
dict: {
data: [
{ value: 0, label: '状态1' },
{ value: 1, label: '状态2' }
]
},
component: {
props: { color: 'auto' },
name: 'values-format'
}
4、自定义行展示组件
在 d2-crud-plus中没有链接显示组件，需要根据element-ui 的组件自定义，可以使用 d2-crud-plus 提供的行展示组件 slot方法来设置。
首先配置 rowSlot=true
{
title: '工作内容',
key: 'workContent',
type: 'text-area',
rowSlot: true // 这里设置 rowSlot
}
然后在 d2-crud-x 下写 slot template ，slot 名称为 column.key+'Slot'，如以下案例。
4.1、单元格设置为 链接显示
<d2-crud-x>
<!-- 自定义链接显示 -->
<template slot="workContentSlot" slot-scope="scope">
<el-link :href="scope.row['workContent']" type="primary" target="_blank">{{ scope.row['workContent'] }}</el-link>
</template>
</d2-crud-x>
展示效果：
4.2、展示图片和标题
<template slot="nameSlot" slot-scope="scope">
<div style="display:flex;align-items:center;">
<el-avatar shape="square" :size="50" :src="scope.row['url']" />
<el-link type="primary" style="margin-left:10px;" :underline="false">{{ scope.row['name'] }}</el-link>
</div>
</template>
展示效果：
5、时间显示
通用配置：
{
title: '创建时间',
key: 'created_at',
width: 160,
// sortable: true,
type: 'datetime', // 字段类型为时间选择器datepicker,根据类型可自动生成默认配置
form: { // form 表单的配置
disabled: false, // 禁止添加输入与修改输入【可选】默认false
value: dayjs().format('YYYY-MM-DD HH:mm:ss')
}
},
6、表单配置
通用配置：
http://d2-crud-plus.docmirror.cn/d2-crud-plus/guide/options.html#form
crudOptions:{
columns:[
{
form:{
title:'表单字段显示的名称', // 默认使用column的title
rules: [ // 表单校验规则
// 更多帮助请参考 https://element.eleme.cn/#/zh-CN/component/form#zi-ding-yi-xiao-yan-gui-ze
{ required: true, message: '请选择地区' }
],
component: { // 添加和修改时form表单的组件
name: 'dict-select', // 表单组件名称，支持任何v-model组件
value: null, // 组件默认值，你还可以通过覆盖doDialogOpened(context)方法，修改context.form.xx的值
props: { // 表单组件的参数，具体参数请查看对应的组件文档
// 如何查找组件配置，请参考
// http://d2-crud-plus.docmirror.cn/d2-crud-plus/guide/component.html
separator:",",//dict-select的组件参数，[不同组件参数不同]
elProps:{ //dict-select内部封装了el-select
filterable: true, //可过滤选择项
multiple: true, //支持多选
clearable: true, //可清除
},
dict:{},//详细见dict配置。运行时，会将column.dict复制到此处，再由此处配置的dict覆盖
},
placeholder:'',
disabled: false, //是否在表单中禁用组件，可以配置为方法，动态禁用↓ ↓ ↓ ↓
// disabled(context){return false}
readonly: false, //表单组件是否是只读，还可以配置为方法，动态只读↓ ↓ ↓ ↓
// readonly(context){return false}
show: true, //是否显示该字段，还可以配置为方法，动态显隐↓ ↓ ↓ ↓
// show(context){return false}
on:{ //除input change事件外，更多组件事件监听
select(event){console.log(event)} //监听表单组件的select事件
},
slots:{ //插槽渲染
default:(h,scope)=>{ //默认的scoped插槽
return (<div>{scope.data}</div>)
}
},
children:[ //子元素
(h)=>{return (<div slot="prefix">非scoped插槽</div>)}
],
span: 12 //该字段占据多宽，24为占满一行
},
order:10,//排序号，默认为10，数字越小 越靠前
//注意：↓↓↓↓ 以下三个disabled，仅初始化时有效，不可动态启用，需要动态显隐字段请配置component.show
disabled:false, //完全关闭该字段在表单中显示
addDisabled: false, //是否仅在添加编辑框中关闭该字段
editDisabled: false, //是否仅在修改编辑框中关闭该字段
/**
* @param value 当前选择的值
* @param form 当前表单
* @param getColumn 获取字段配置的方法，getColumn(keyName) 返回keyName的字段配置，可以动态修改组件配置
* @param mode 当前模式:【add、edit、search】
* @param component 当前组件的ref
* @param immediate 是否是对话框打开后立即触发的
* @param getComponent 获取组件Ref的方法， getComponent(keyName), 返回组件ref，可以动态调用该组件的方法
注意：当component未初始化或者没有显示时，是获取不到组件ref的
**/
valueChange(key ,value ,form, {getColumn, mode, component, immediate, getComponent }){
// form表单数据change事件，表单值有改动将触发此事件
},
valueChangeImmediate:false, //是否在打开对话框后触发一次valueChange事件
// 是否启用form编辑框的slot插槽,需要d2-crud-x才支持
// 示例 http://preview.d2-crud-plus.docmirror.cn/D2CrudPlusExample/#/demo/form/slot
slot:false,
itemProps:{
// el-form-item的配置
// https://element.eleme.cn/#/zh-CN/component/form#form-item-attributes
labelWidth:'0px' //可以隐藏表单项的label
}
}
}
]
}
