前端组件文档

# Q-Input 搜索框

提示

外部输入框支持 v-bind="$attrs" 和 v-on="$listeners" 透传。

# 基础用法


<template>
  <QInput
      v-model="ruleName"
      placeholder="请选则规则名称"
      :columns="ruleColumns"
      :fetch-data-function="getRules"
      :query-params="queryParamsRules"
      search-prop="ruleName"
      :value-key="(row) => `${row.ruleName} / ${row.description}`"
      :res-config="resConfig"
  />
</template>

<script>

  export default {
    data() {
      return {
        ruleName: '',
        ruleColumns: [
          {prop: 'ruleName', label: '规则名称'},
          {prop: 'description', label: '描述'}
        ],
        queryParamsRules: {
          pageSize: 10,
          pageNum: 1,
          ruleName: ''
        },
        resConfig: {
          rowsPath: 'data.data.rows',
          totalPath: 'data.data.total'
        },
      };
    },
    methods: {
      async getRules(params) {
        console.log('请求参数:', params);
        // 模拟后端返回格式
        const mockResponse = {
          data: {
            data: {
              rows: [
                {id: 1, ruleName: '规则 A', description: '描述 A'},
                {id: 2, ruleName: '规则 A', description: '描述 A'},
                {id: 3, ruleName: '规则 A', description: '描述 A'},
                {id: 4, ruleName: '规则 A', description: '描述 A'},
                {id: 5, ruleName: '规则 A', description: '描述 A'},
                {id: 6, ruleName: '规则 A', description: '描述 A'},
                {id: 7, ruleName: '规则 A', description: '描述 A'},
                {id: 8, ruleName: '规则 A', description: '描述 A'},
                {id: 9, ruleName: '规则 A', description: '描述 A'},
                {id: 10, ruleName: '规则 A', description: '描述 A'},
                {id: 11, ruleName: '规则 A', description: '描述 A'},
                {id: 12, ruleName: '规则 A', description: '描述 A'},
                {id: 13, ruleName: '规则 A', description: '描述 A'},
                {id: 14, ruleName: '规则 A', description: '描述 A'},
                {id: 15, ruleName: '规则 A', description: '描述 A'},
                {id: 16, ruleName: '规则 A', description: '描述 A'},
                {id: 17, ruleName: '规则 B', description: '描述 B'},
                {id: 18, ruleName: '规则 C', description: '描述 C'},
              ],
              total: 18
            }
          }
        };

        // 模拟搜索功能
        let filteredData = mockResponse.data.data.rows;
        if (params.ruleName) {
          filteredData = filteredData.filter(item => item.ruleName.includes(params.ruleName));
        }
        if (params.description) {
          filteredData = filteredData.filter(item => item.description.includes(params.description));
        }

        // 模拟分页功能
        const startIndex = (params.pageNum - 1) * params.pageSize;
        const endIndex = startIndex + params.pageSize;
        const pagedData = filteredData.slice(startIndex, endIndex);

        // 修改模拟返回的数据格式
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              data: {
                data: {
                  rows: pagedData,
                  total: filteredData.length
                }
              }
            });
          }, 500);
        });
      }
    }
  };
</script>
Expand Copy

# 进阶用法


<template>
  <div style="padding: 20px;">
    <QDynamicTable
        size="mini"
        :columns="tableColumns"
        :table-data="tableData"
        :is-header="true"
        @submit="handleSubmit"
        @temporary="handleTemporary"
    >
      <template v-slot:ruleName="{row }">
        <QInput
            v-model="row.ruleName"
            placeholder="请选则规则名称"
            :columns="ruleColumns"
            :fetch-data-function="getRules"
            :query-params="queryParamsRules"
            search-prop="ruleName"
            value-key="ruleName"
            :table-attrs="{'max-height': '200px'}"
            :row-key="rowKey"
            :res-config="resConfig"
            :disabledKey="disabledKey"
            mode="multiple"
            @select="(data) => updateRowData(row, data)"
            @selection="(data) => handleSelection(row, data)"
        />
      </template>
    </QDynamicTable>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        ruleColumns: [
          {prop: 'ruleName', label: '规则名称'},
          {prop: 'description', label: '描述'}
        ],
        queryParamsRules: {
          pageSize: 10,
          pageNum: 1,
          ruleName: ''
        },
        resConfig: {
          rowsPath: 'data.data.rows',
          totalPath: 'data.data.total'
        },
        disabledKey: [],
        tableColumns: [
          {
            prop: 'id',
            label: 'id',
            visible: false
          },
          {
            prop: 'ruleName',
            label: '规则名称',
            type: 'custom'
          },
          {
            prop: 'ruleNumber',
            label: '数值',
            type: 'number'
          }
        ],
        tableData: [],
        rowKey: 'id'
      };
    },
    methods: {
      handleSubmit(data) {
        console.log('data==>', data)
        if (!data || !Array.isArray(data)) {
          return
        }
        this.tableData = data
      },
      updateRowData(row, data) {
        Object.assign(row, {...data})
      },
      handleTemporary(data) {
        console.log('handleTemporary==>', data)
        this.disabledKey = data
            .filter(item => this.$QUtils.StrUtil.isNotBlank(item[this.ruleColumns[0].prop]))
            .map(item => item[this.rowKey])
      },
      handleSelection(row, data) {
        console.log('selection==>', data)
        const temp = data.map(item => ({...row, ...item}))
        this.tableData = [...this.tableData, ...temp]
      },
      handleSelectedRules(selected) {
        console.log('选中的规则:', selected);
      },
      async getRules(params) {
        console.log('请求参数:', params);

        // 模拟后端返回格式
        const mockResponse = {
          data: {
            data: {
              rows: [
                {id: 1, ruleName: '规则 A', description: '描述 A'},
                {id: 2, ruleName: '规则 A', description: '描述 A'},
                {id: 3, ruleName: '规则 A', description: '描述 A'},
                {id: 4, ruleName: '规则 A', description: '描述 A'},
                {id: 5, ruleName: '规则 A', description: '描述 A'},
                {id: 6, ruleName: '规则 A', description: '描述 A'},
                {id: 7, ruleName: '规则 A', description: '描述 A'},
                {id: 8, ruleName: '规则 A', description: '描述 A'},
                {id: 9, ruleName: '规则 A', description: '描述 A'},
                {id: 10, ruleName: '规则 A', description: '描述 A'},
                {id: 11, ruleName: '规则 A', description: '描述 A'},
                {id: 12, ruleName: '规则 A', description: '描述 A'},
                {id: 13, ruleName: '规则 A', description: '描述 A'},
                {id: 14, ruleName: '规则 A', description: '描述 A'},
                {id: 15, ruleName: '规则 A', description: '描述 A'},
                {id: 16, ruleName: '规则 A', description: '描述 A'},
                {id: 17, ruleName: '规则 B', description: '描述 B'},
                {id: 18, ruleName: '规则 C', description: '描述 C'},
              ],
              total: 18
            }
          }
        };

        // 模拟搜索功能
        let filteredData = mockResponse.data.data.rows;
        if (params.ruleName) {
          filteredData = filteredData.filter(item => item.ruleName.includes(params.ruleName));
        }
        if (params.description) {
          filteredData = filteredData.filter(item => item.description.includes(params.description));
        }

        // 模拟分页功能
        const startIndex = (params.pageNum - 1) * params.pageSize;
        const endIndex = startIndex + params.pageSize;
        const pagedData = filteredData.slice(startIndex, endIndex);

        // 修改模拟返回的数据格式
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              data: {
                data: {
                  rows: pagedData,
                  total: filteredData.length
                }
              }
            });
          }, 500);
        });
      }
    }
  };
</script>
Expand Copy

# Attributes

属性名 说明 类型 可选值 默认值
v-model 数据绑定 String — —
placeholder 初始占位符 String — —
columns 列数据 Array — columns
rowKey 表格Key String — 'id'
fetchDataFunction 数据请求方法 Function — —
queryParams 请求参数 Object — —
searchProp 搜索字段 String — columns[0].prop
valueKey 选中填充的字段 [String, Function] Function 仅支持mode='single' columns[0].prop
mode 单选 or 多选 String single，multiple 'single'
disabledKey 控制行禁用的字段 (支持字符串或数组) [String, Array] — ''
pageSizes 分页大小 Array [5, 10, 20, 50, 100] [5, 10, 20, 50, 100]
time 防抖延迟时间 Number — 300
resConfig 返回数据格式 Object — { rowsPath: 'rows', totalPath: 'total' }
tableAttrs 表格属性 Object — {}
tableListeners 表格事件监听器 Object — {}
pageAttrs 分页属性 Object — {}
pageListeners 分页事件监听器 Object — {}
popoverAttrs 弹窗属性（popover） Object — {}
popoverListeners 弹窗事件监听器（popover） Object — {}

# columns

属性名 说明 类型 可选值 默认值
prop 字段 String — —
label 标签 String — —
columnAttrs Table-column中的透传 Object — —
columnListeners Table-column中的透传 Object — —

# Events

事件名 说明 回调参数 参数说明
select 获取当前选中的事件 data {}
selection 获取当前勾选的事件 data []

← Q-View 文件预览 →