vue 函數組件解決動態渲染問題

1. 場景： 有一個檢索池，檢索條件可以自定義一個，檢索條件對應的數據動態加載，檢索條件對應的項不確定，有 sleect,input, dateRabge....

 

 

 2. 需求遇到的問題

　　1. 方案1： 使用 v-html 解決，1. 不能解決數據動態加載問題，2. 不能解決項目是 innput select 動態的問題

　　2. 方案2：使用render方法，函數組件動態渲染

　　　　

3. 解決步驟：

　　1. 定義條件枚舉：

　　

searchTemplates: [
        {
          key: 'order_id',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="運輸任務單號">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Input placeholder="運輸任務單號" clearable v-model={this.highSearchFormal.order_id} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'order_id') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'original_order_no',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="運輸訂單號">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Input placeholder="運輸訂單號" clearable v-model={this.highSearchFormal.original_order_no} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'original_order_no') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'execution_no',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="運輸執行單號">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Input placeholder="運輸執行單號" clearable v-model={this.highSearchFormal.execution_no} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'execution_no') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'dispatch_id',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="調度單號">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Input placeholder="調度單號" clearable v-model={this.highSearchFormal.dispatch_id} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'dispatch_id') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'consignee_name',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="收貨方">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                {/* <Select clearable filterable placement="bottom-end"
                  v-model={this.highSearchFormal.consignee_name}
                  on-on-open-change={this.openComsignee}
                  remoteSearch={this.remoteComposeConsignee}
                  scrollBottom={this.scrollBottomComposeConsignee}>
                  {this.highConsigneeDatas.map((o, i) => <Option key={i} value={o.consigneeId} label={o.consigneeName} />)}
                </Select> */}
                <Input placeholder="收貨方名稱" clearable v-model={this.highSearchFormal.consignee_name} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'consignee_name') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'state',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="訂單狀態">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable multiple on-on-change={this.changeComposeState} v-model={this.state_arr}>
                  {this.searchDatas.stateList.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'state') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'priority',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="優先級">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.priority}>
                  {this.searchDatas.priorityList.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'priority') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'stocking_state',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="備貨狀態">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.stocking_state}>
                  {this.searchDatas.stockingStateList.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'stocking_state') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'operation_state',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="作業狀態">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable multiple on-on-change={this.changeComposeOperationState} v-model={this.operation_state_arr}>
                  {this.operationStateList.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'operation_state') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'order_source',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="訂單來源">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.order_source}>
                  {this.orderSourceList.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'order_source') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'ros_state',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="智能調度狀態">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.ros_state}>
                  {this.rosStateEnum.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'ros_state') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'dispatch_type',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="調度方式">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.dispatch_type}>
                  {this.dispatchTypeEnum.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'dispatch_type') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'customer_category',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="客戶類別">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.customer_category}>
                  {this.customerCategoryDict.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'customer_category') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'order_flag',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="訂單標識">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.order_flag}>
                  {this.orderFlagList.map((o, i) => <Option key={i} value={o.dictKey} label={o.dictValue} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'order_flag') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'company_name',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="所屬公司">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Input placeholder="所屬公司名稱" clearable v-model={this.highSearchFormal.company_name} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'company_name') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'shifts_name',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="班次">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Select clearable filterable v-model={this.highSearchFormal.shifts_name}
                  remoteSearch={this.remoteComposeShifts}
                  scrollBottom={this.scrollBottomComposeShifts}>
                  {this.highShiftsList.map((o, i) => <Option key={i} value={o.shiftsName} label={o.shiftsName} />)}
                </Select>
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'shifts_name') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'delivery_date',
          type: 'range',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="配送日期">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable
                  editable={false} format="yyyy-MM-dd"
                  type="daterange"
                  placement="bottom-end"
                  placeholder="選擇配送日期"
                  on-on-clear={() => this.clearDateTime('delivery_date')}
                  on-on-change={this.changeComposeDeliveryDate}
                  v-model={this.delivery_date_arr}
                />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'delivery_date') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'delivery_date',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="配送日期">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable
                  editable={false} format="yyyy-MM-dd"
                  type="date"
                  placement="bottom-end"
                  placeholder="選擇配送日期"
                  on-on-change={(val) => this.formatDate('delivery_date', val)}
                  v-model={this.highSearchFormal.delivery_date} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'delivery_date') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'handover_date',
          type: 'range',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="交貨日期">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable
                  editable={false} format="yyyy-MM-dd"
                  type="daterange"
                  placement="bottom-end"
                  placeholder="選擇交貨日期"
                  on-on-clear={() => this.clearDateTime('handover_date')}
                  on-on-change={this.changeComposeHandoveDate}
                  v-model={this.handover_date_arr} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'handover_date') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'handover_date',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="交貨日期">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable
                  editable={false} format="yyyy-MM-dd"
                  type="date"
                  placement="bottom-end"
                  placeholder="選擇交貨日期"
                  on-on-change={(val) => this.formatDate('handover_date', val)}
                  v-model={this.highSearchFormal.handover_date} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'handover_date') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'earliest_arrival_time',
          type: 'range',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="要求最早到達時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm"
                  placement="bottom-end"
                  type="datetimerange"
                  placeholder="選擇要求最早到達時間"
                  on-on-clear={() => this.clearDateTime('earliest_arrival_time')}
                  on-on-change={this.changeArliestTime}
                  v-model={ this.earliest_arrival_time_arr } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'earliest_arrival_time') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'earliest_arrival_time',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="要求最早到達時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm"
                  placement="bottom-end"
                  type="datetime"
                  placeholder="選擇要求最早到達時間"
                  on-on-change={() => this.formatTime('earliest_arrival_time')}
                  v-model={ this.highSearchFormal.earliest_arrival_time } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'earliest_arrival_time') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'latest_arrival_time',
          type: 'range',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="要求最晚到達時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm"
                  placement="bottom-end"
                  type="datetimerange"
                  placeholder="選擇要求最晚到達時間"
                  on-on-clear={() => this.clearDateTime('latest_arrival_time')}
                  on-on-change={this.changeLatestTime}
                  v-model={ this.latest_arrival_time_arr } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'latest_arrival_time') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'latest_arrival_time',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="要求最晚到達時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm"
                  placement="bottom-end"
                  type="datetime"
                  placeholder="選擇要求最晚到達時間"
                  on-on-change={() => this.formatTime('latest_arrival_time')}
                  v-model={ this.highSearchFormal.latest_arrival_time } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'latest_arrival_time') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'creator_name',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="創建人">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Input placeholder="創建人名稱" clearable v-model={this.highSearchFormal.creator_name} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'creator_name') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'modifier_name',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="更新人">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <Input placeholder="更新人名稱" clearable v-model={this.highSearchFormal.modifier_name} />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'modifier_name') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'create_time',
          type: 'range',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="創建時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm:ss"
                  placement="bottom-end"
                  type="datetimerange"
                  placeholder="選擇創建時間"
                  on-on-clear={() => this.clearDateTime('create_time')}
                  on-on-change={this.changeCreatTime}
                  v-model={ this.create_time_arr } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'create_time') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'create_time',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="創建時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm:ss"
                  placement="bottom-end"
                  type="datetime"
                  placeholder="選擇創建時間"
                  on-on-change={() => this.formatHMSTime('create_time')}
                  v-model={ this.highSearchFormal.create_time } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'create_time') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'update_time',
          type: 'range',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="更新時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm:ss"
                  placement="bottom-end"
                  type="datetimerange"
                  placeholder="選擇更新時間"
                  on-on-clear={() => this.clearDateTime('update_time')}
                  on-on-change={this.changeUpdateTime}
                  v-model={ this.update_time_arr } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'update_time') }></Icon>
              </form-item>
            )
          }
        },
        {
          key: 'update_time',
          type: 'normal',
          relationShipName: '',
          render: (h, row) => {
            return (
              <form-item label="更新時間">
                { row.relationShipName !== '' && <div class="sign">{ row.relationShipName }</div> }
                <DatePicker clearable editable={false}
                  format="yyyy-MM-dd HH:mm:ss"
                  placement="bottom-end"
                  type="datetime"
                  placeholder="選擇更新時間"
                  on-on-change={() => this.formatHMSTime('update_time')}
                  v-model={ this.highSearchFormal.update_time } />
                <Icon type="icon-close" color="blue" class="closeBtn" onClick={ () => this.removeCondition(row, 'update_time') }></Icon>
              </form-item>
            )
          }
        }
      ]

2. 定義渲染函數組件

　　

export default {
  name: 'searchItems',
  functional: true,
  props: {
    render: Function,
    index: Number,
    type: String,
    relationShipName: String
  },
  render: (h, ctx) => {
    const params = {
      index: ctx.props.index,
      relationShipName: ctx.props.relationShipName,
      type: ctx.props.type
    }
    return ctx.props.render(h, params)
  }
}

3. 渲染

<div v-for="(item, index) in renderSearchTemplate" :key="index">

                  <searchItems :render="item.render" :index="index" :relationShipName="item.relationShipName">

                  </searchItems>

 </div>