vue3 依赖-组件tablepage-vue3版本1.1.0/1.1.1更新内容：新增特性childConfig

github求⭐

可通过github 地址和npm 地址查看全部内容

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例-汇总

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅰ）配置项文档

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅱ）搜索及数据获取配置项

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅲ）列表项及分页器配置及props配置

vue3 依赖-组件tablepage-vue3说明文档，列表页快速开发，使用思路及范例（Ⅳ）其他配置项

vue3 依赖-组件tablepage-vue3版本1.0.2更新内容

vue3 依赖-组件tablepage-vue3版本1.0.3更新内容

vue3 依赖-组件tablepage-vue3 项目公共配置封装

介绍

为适配Element框架，在搜索项设置【searchConfig】中，新增字段childConfig，进行自动渲染组件所需的子组件列表

应用结构

主要应用于(【ElSelect】-【ElOption】)（【ElCheckboxGroup】-【ElCheckbox】）等类似结构

searchConfig(array 类型)

属性名	说明	类型	默认值
childConfig	子组件配置对象	Object	-

childConfig（object类型）

属性名	说明	类型	默认值
type	element相关组件标签文本（以<el-time-picker>为例：‘el-time-picker’|‘time-picker’|‘ElTimePicker’|‘TimePicker’均可）	将捕获element-UI相关组件，并通过v-model将值与页面搜索项进行绑定	String
list	数据遍历对象	array	-
keys	数据遍历对象中需要绑定到每个子组件的数据，key值将绑定到子组件上，value值将每个list的数据绑定到子组件对应的key上	Object	{label:‘label’,value:‘value’}
bind	子组件属性绑定，将直接作用于子组件的绑定	Object	默认值可详见当type不为时间类型时 bind默认值

示例

配置代码：

const searchConfig = [
  {
    label: '类型',
    key: 'type',
    type: 'select',
    bind: {
      filterable: true
    },
    childConfig: {
      type: 'el-option',
      list: [{
	      deptName:'类型1',
	      deptId:'1'
      },{
	      deptName:'类型2',
	      deptId:'2'
      },{
	      deptName:'类型3',
	      deptId:'3'
      }],
      keys: {
        label: 'deptName',
        value: 'deptId'
      },
      bind:{
	      style:{
		      width:'100%'
	      }
      }
    }
  }
]
/**
每个搜索项默认绑定如下结构
  const defBindData = {
    placeholder: configItem.label || '',
    clearable: true,
    style: 'width: 200px'
  }
*/

渲染结构

 <el-select
      v-model="form.type"
      filterable="true"
      clearable="true"
      placeholder="类型"
      style="width: 200px"
    >
      <el-option
        v-for="item in options"
        :label="item['deptName']"
        :value="item['deptId']"
	     style="width: 100%"
      />
      <!-- item['deptName']=>item[keys.label] -->
      <!-- item['deptId']=>item[keys.value] -->
    </el-select>
    options = [{
	      deptName:'类型1',
	      deptId:'1'
      },{
	      deptName:'类型2',
	      deptId:'2'
      },{
	      deptName:'类型3',
	      deptId:'3'
      }]