Q-Selector 动态搜索框-二次封装

基础用法

提示

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

内部输入框支持 v-bind="innerAttrs" 和 v-on="innerListeners" 透传。

内部输入框 搜索的内容为第一列，只能按照第一列进行搜索。

<template>
  <QSelector v-model="drugName"
             placeholder="请输入商品名称"
             :columns="goodsColumns"
             :fetch-data-function="getBindGoods"
             :query-params="queryParamsGoods"
             :readonly="true"
             :multiple="false"
             :width="450"
             :inner-attrs="{ placeholder:'请输入'+this.goodsColumns[0].label}"
             @select="(data) => updateRowData(row, data)"
  >
    <!--    <template v-slot:specification="{row}">-->
    <!--      <dict-tag :options="dict.type.gg" :value="row.specification"/>-->
    <!--    </template>-->
  </QSelector>
</template>
<script>
  export default {
    data() {
      return {
        drugName: '',
        row: {specification: '1'},
        goodsColumns: [
          {label: '商品名称', prop: 'drugName'},
          {label: '生产厂家', prop: 'manufacturer'},
          {label: '规格', prop: 'specification'}
        ],
        queryParamsGoods: {
          pageNum: 1,
          pageSize: 10,
          drugName: null
        },
        disabled: false,
        tableData: [],
        isInfo: false,
        temporaryData: [],
        alertTitle: '总计金额：¥ 0.00'
      }
    },
    methods: {
      getBindGoods() {
        return {
          rows: [
            {id: 1, drugName: '白菜', manufacturer: 'xxx公司', specification: '1'},
            {id: 2, drugName: '生菜', manufacturer: 'xxx公司', specification: '2'},
            {id: 3, drugName: '花菜', manufacturer: 'xxx公司', specification: '3'},
          ],
          total: 3
        }
      },
      handleSelection(row, data) {
        console.log('selection==>', data)
        const temp = data.map(item => ({...row, ...item}))
        this.tableData = [...this.tableData, ...temp]
      },
      updateRowData(row, data) {
        Object.assign(row, {...data})
      },
      handleSubmit(data) {
        console.log('handleSubmit==>', data)
        if (!data || !Array.isArray(data)) return
        this.tableData = data

        // 使用 reduce 来计算总和
        const totals = data.reduce((acc, item) => {
          acc.allPrice += (item.unitPrice || 0) * (item.number || 0)
          return acc
        }, {allPrice: 0})

        // 提取 totals
        this.alertTitle = '进货金额：¥ ' + totals.allPrice
      },
    }
  }
</script>

Expand Copy Copy

Attributes

属性名	说明	类型	可选值	默认值
v-model	数据绑定	String	—	—
columns	列数据	Array	—	columns
resConfig	返回数据格式	Object	—	{rowsPath: 'data.rows',totalPath: 'data.total'}
searchProp	查询参数	String	—	columns第一列的prop
width	弹框宽度	Number	—	450
multiple	多选框	Boolean	—	true
trigger	触发方式	String	—	manual
placement	出现位置	String	—	bottom
suffixIcon	末尾图标	String	—	el-icon-more
placeholder	占位符	String	—	请输入...
readonly	输入框只读	Boolean	—	false
disabled	禁用	Boolean	—	false
query-params	查询参数	Object	—	{}
fetch-data-function	查询函数	Function	—	—
disabledField	置灰匹配参数 ([外部动态表格ID,内部弹窗表格ID])	String /Array	—	—
disabled-data	置灰数据	Array	—	—
tableAttrs	Table中的透传	Object	—	—
tableListeners	Table中的透传	Object	—	—
innerAttrs	弹出的输入框中的透传	Object	—	—
innerListeners	弹出的输入框中的透传	Object	—	—

columns

提示

columns 数组第一列的字段一定是与搜索框进行绑定的数据。

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

Events

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