天码科技研发文档

# 其他组件

# 筛选 lg-sieve

参数 说明 类型 必须 默认值
columns 配置项 Array 是
derive 是否显示导出按钮 Boolean 否 true
reset 是否显示重置按钮 Boolean 否 true

# 插槽

名称 说明 调用值
sieveLeft 筛选左边插槽
sieveRight 筛选右边插槽
sieveInline 筛选按钮后的插槽

# 可调用事件

名称 说明 回调参数
resetFields 清空筛选表单

# 回调

名称 说明 回调参数
change 重置，确定回调 筛选值
onDerive 点击了导出

# columns

类型：Array

描述：用于表头名称配置，用法同table，但该组件仅保留搜索功能

注：1.1.0新增sieveFold属性

columns:[
            {
             title: '设备类型',
             dataIndex: 'index',
              sieve:'select' //筛选类型
           //options: 'sex',//关联字典
               sieveFold:true, //是否收起
             table:'class',//关联数据表,如果页面没有进行初次获取，会自动进行获  
            deploy:{placeholder:'请输入'}//传入组件属性
			}
			 ],

# sieve

类型

//sieve:"input"//输入框
//date 日期选择框
//select 单选
//cascader 级联
//customize 自定义

# 关联筛选 （options，table）

注：同时关联字典和数据表，优先关联字典，------ 数据表关联开发中

//options:"sex"//传入对应字典名称

options:[[{ label: '阿斯顿', value: 123 }],'sex']

//传入数组，则表示在尾部插入自定义数据。如果不想关联字典则只传入一个值，但必须如上嵌套一层数组,关联数据表用法相同

# 动态插入数组 （options）

注：自定义筛选器动态（如请求表获取列表）数据源需要使用计算属性

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import utils from '/src/utils/utils.js'
// 关联表获取自定义筛选器数据源,通过计算属性更新自定义数据源
let columns = computed(() => {
    return [{
        title: '序号',
        dataIndex: 'index',
        align: 'center',
        width: 50,
    },
    {
        title: '关联班级',
        dataIndex: 'id_class',
        sieve: 'select',
        show: true,
        options: [class_list.value],
    },

    {
        title: '操作',
        align: 'center',
        dataIndex: 'action',
        width: 100,
    },
    ]
})
const demo_list = ref([])
onMounted(() => {
    //请求表数据
    utils.setTable("demo").then(res => {
        demo_list.value = res.demo
    })
})
</script>

# 自定义插入组件 （customize）

注：如内置组件不符合业务需求可以通过传入组件的方式生成自定义组件

<template>
	  <lg-sieve :columns='columns' @change="change"></lg-sieve>
</template>

<script setup>
	import {lgSieve} from 'lg-ui-pro'
	import { reactive,markRaw } from 'vue';
	import {lgInput} from 'lg-ui'
	 let lgdemo ={
		   template: `<lgInput @change='change'></lgInput>`,
		    components: {
		    lgInput
		     },
		  setup() {
		    const change = () => {
		    console.log('触发');
		    };
		    return {
		     change
		    }
		  },	 
	 }
	let data =reactive({
			columns: [
		    {
			 title: '名称',
			 dataIndex: 'title',
			    sieve:'customize',
				 component:markRaw(lgdemo)
			},
	],
	})
</script>

案例：

<template>
  <div>
	  <lg-sieve :columns='columns' @change="change"></lg-sieve>
  </div>
</template>
<script setup>
    import {lgSieve} from 'lg-ui-pro'
import { ref } from 'vue'
const columns = ref(
  [{
    title: '设备类型',
    dataIndex: 'index',
    sieve: 'select',//筛选类型
    options: 'type',//关联字典
     deploy:{placeholder:'请选择'}
  }]
)

const change = (e, a) => {

}
</script>

# 上传图片 lg-image

参数 说明 类型 必须 默认值
v-model/modelValue 图片数据(需与类型一致) Array/String 是
mode 数据类型（String/Array） String 否 String
limit 上传数量 Number 否 1
size 大小限制 Number 否 1
accept 上传类型 Array 否 ['image/png','image/gif','image/bmp','image/jpeg']

案例

<template>
<lg-image v-model="url_list" :limit='1'></lg-image>
</template>
<script setup>
    import { ref } from 'vue'
    const url_list = ref('http://pic1.win4000.com/wallpaper/3/52c11445ac6c7.jpg')
</script>

# 上传文件 lg-file

参数 说明 类型 必须 默认值
v-model/modelValue 图片数据(需与类型一致) Array/String 是
mode 数据类型（String/Array） String 否 String
limit 上传数量 Number 否 1
size 大小限制 Number 否 1
accept 上传类型 Array 否 []
autoUpload 自动上传 Boolean 否 true

# 插槽

名称 说明 参数
default 默认插槽，用于创建按钮

# 可调用事件

名称 说明 调用值
fileList 已经选择的文件列表（主要用于手动上传获取列表）

# 回调

名称 说明 回调参数
change 确定回调
callStatus 上传请求回调详细值

案例

<template>
<lg-file v-model="list" :limit='1'></lg-file>
</template>
<script setup>
     import { ref } from 'vue'
     const url_list = ref('http://pic1.win4000.com/wallpaper/3/52c11445ac6c7.jpg')
</script>

← 可注入全局方法 →