d2-crud-plus 的常用操作

前端 2021-05-13 3.19K

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 templateslot 名称为 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>

展示效果:

image-20210803163104175

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>

展示效果:

image-20211230171843894

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
     } 
     }
    }
  ]
}


关注微信公众号『极客技术之路

第一时间了解最新动态
关注博主不迷路~

极客技术之路:站内收集的部分资源来源于网络,若侵犯了您的合法权益,请联系我们删除!
分享到:
赞(0)

文章评论

0点赞 0评论 收藏 QQ分享 微博分享

极客技术之路

极客技术之路