el 原生组件

支持 el 原生组件通过配置化使用，本例演示 el 的时间轴和穿梭框的用法

基本用法

<template>
  <dn-page>     
    <dn-form ref="formRef" v-bind="formOptions"></dn-form>      
  </dn-page>   
</template>

<script lang="jsx">
import {ref,defineComponent} from "vue";
import { useForm } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();

const data = [];
for (let i = 1; i <= 15; i++) {
  data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
  })
}
function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      fn1: {
        title: "时间轴",
        type: "el-timeline",
        form: {
          col:{span:24},  
          component:{
            //原生属性
          }, 
          props:{
            slots:{
              //子内容，用default槽位返回
              default:()=>{
                const data = [
                    {
                        fid:1,
                        time:'2024-10-20',
                        title:'start',
                        content:'start develop',
                        type:'primary',
                        icon:'MoreFilled'
                    },{
                        fid:1,
                        time:'2024-10-25',
                        title:'process',
                        content:'process ....',
                        type:'warning'
                    },{
                        fid:1,
                        time:'2024-10-30',
                        title:'end',
                        content:'this process end',
                        type:'success'
                    }
                ];              
                const ret = data.map((item,index)=>{
                    return <el-timeline-item 
                                key={item.fid} 
                                timestamp={item.time}
                                placement="top"
                                type={item.type}
                                icon={item.icon}>
                                <el-card>
                                    <h4>{item.title}</h4>
                                    <p>{item.content}</p>
                                </el-card>
                            </el-timeline-item>
                });
                return <span> {ret} </span>;
              }
            }    
          }      
        }         
      },
      fnhr:{
        type:'split',
        form:{
          props:{
            value:'穿梭框'
          }
        }
      },
      fn2:{
        title: "穿梭框",
        type: "el-transfer",
        form: {
          col:{span:24},  
          component:{
            data:data,
            filterable:true,
            'filter-method':(query, item)=>{
                return item.label.toLowerCase().includes(query.toLowerCase())
            }
          },
          props:{
            value:[],
            type:'nolabel'
          }  
        }         
      }   
    },
    form: {
        labelWidth: "80px",
        'labelPosition':'left',
      }
  });
}

function initFormOptions() { 
formOptions.value = createFormOptions();
formOptions.value.initData = { fid:1 };

return {
  formOptions,   
  formRef
};
}

export default defineComponent({
setup() {
  return {
    ...initFormOptions()
  };
}
});
</script>
<style lang="less">
.el-transfer-panel{
  width:220px;
}
.el-transfer__buttons{
  padding:0px 15px;
}
.el-timeline{
  list-style:none !important;

  p{
    margin:4px 0px;
  }
  h4{
    margin-top:0px;
  }
}
</style>

el 原生组件 API

PropsName	Description	Type	Default
key	一般为字段名称	json
└ title	标题	string
└ type	el 组件名称el-transfer等	string
└ form	表单栏位配置	json
└└ col	el-col配置，参考原生组件	json
└└ component	原生组件属性	json
└└└ key	参考原生el组件
└└ props	组件属性	json
└└└ slots	组件槽位，	json
└└└└ key	组件槽位，参考原生槽位
└└└ type	固定为 nolabel,不显示item-label	string
└└ tooltip	输入提示内容	string
└└ order	排序	number
└└ show	是否显示	boolean
└└ blank	是否空占位	boolean
└└ prefixRender	组件左边render
└└ suffixRender	组件右边render