jeecg-boot 的 j-editable-table表格框添加 slot 插槽

前景提要

j-editable-table 是 jeecg-boot 封装好的内容,根据 colums 的内容进行展示,那么如何在这个展示的过程中替换掉某个内容换成我想显示的内容呢?

  1. 将 colums 里面某个内容进行修改
//原内容
{
     
  title: '项目名称',
  key: 'projectName',
  type: FormTypes.select,
  dictCode: 'annual_Environmental_Projects',
  width: '210px',
  placeholder: '请输入${title}',
  defaultValue: '123',
  validateRules: [{
      required: true, message: '${title}不能为空' }],
},
//修改过后的内容
{
     
  title: '项目名称',
  key: 'projectName',
  type: FormTypes.slot, //  <-------------改为 slot 格式
  slotName: 'action',   //  <-------------slot 的名称,对应 v-slot 冒号后面和等号前面的内容
  dictCode: 'annual_Environmental_Projects',
  width: '210px',
  placeholder: '请输入${title}',
  defaultValue: '123',
  validateRules: [{
      required: true, message: '${title}不能为空' }],
},
  1. 书写插槽
<template v-slot:action="props">    <------------ action 为slot 名称,props 可以用来传递参数,看需求书写
  <a-select
    style="width: 195px"
    :default-value="xxx"
  >
    <a-select-option
      v-for="(item) in sexDictOptions"
      :key="item.value"
      :value="item.value"
    >{
     {
     item.text}}</a-select-option>
  </a-select>
</template>                         <------------中间为插槽内容,这两个为关键

书写插槽的位置在哪呢?

jeecg-boot 的 j-editable-table表格框添加 slot 插槽_第1张图片
我的 j-editable-table 里面是单标签怎么办?

  • 那就把它变为双标签!(没有任何影响的)

官方文档地址 http://doc.jeecg.com/1273911

你可能感兴趣的:(Jeecg-Boot,jeecg-boot,antd,vue,vue)