vue+element 实现input批量查询条件

 有时候工作需要某个字段实现批量查询,但是EXCEL又比较麻烦,可以使用动态批量查询

 下面是我亲测可用的批量查询界面:

组件实现了字段校验,可使用空格、回车、分号、逗号、excel拷贝、进行输入下一个的能力

大家可以根据自己实际情况调整组件

外部引用批量查询组件:

<CompVin v-model="queryParams.vin" ref="vinRef" />

批量查询组件:

<template>
  <div class="component-vin-input" label-position="top">
    <el-form-item label="VIN">
    <template #label>
        <span>VIN码</span>
      </template>
    <div class="vin-input-wrapper">
      <div v-for="(vin, index) in vinGroup" :key="index" :class="vin.result ? '' : 'input-error'" class="vin-edit">
        <el-input v-model="vin.vin" maxlength="17" @input="value => handleVinItemChange(value, index)"
          @blur="validate([], index)" />
        <div class="error-tip">{{ vin.message }}</div>
      </div>
      <el-input v-model="vinInput" class="vin-input" placeholder="请输入或粘贴VIN码" @input="handleVinInput"
        @blur="handleVinInputBlur" @keyup.enter.native="handleVinInputBlur" />
    </div>
    <div class="vin-tip">每个VIN码输入完成后,以分号(;)结束</div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'CompVin',
  props: {
    value: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      vinGroup: [],
      vinInput: '',
      vinList: []
    }
  },
  mounted() {
    this.value.forEach(vin => {
      this.vinGroup.push({
        result: true,
        vin,
        message: ''
      })
    })
  },
  methods: {
    /**
     * 清空
     */
    clearInput() {
      this.vinGroup = []
      this.vinInput = ''
      this.vinList = []
    },
    /**
     * 更新vin的页面显示
     * @param vinList vin的列表
     */
    updateVinGroup(vinList) {
      // 先清空vin
      this.vinGroup = []
      // 遍历列表数据
      vinList.forEach(vin => {
        this.vinGroup.push({
          result: true,
          vin,
          message: ''
        })
      })
    },

    /**
     * vin改变的方法,将其格式化成数组
     */
    handleVinInput() {
      // 如果当前没有输入
      if (!this.vinInput) {
        return
      }
      // 替换中文的分号
      const replaceChinessSemicolon = this.vinInput.replace(/[;,,\s\r\n]/g, ';')
      // 按逗号分割
      const vinList = replaceChinessSemicolon.split(';')
      // 取出最后一个当成输入项目
      this.vinInput = vinList.pop()
      // 重新赋值vin的集合
      this.vinList = [
        ...(this.vinList || []),
        ...vinList.filter(vin => !!vin)
      ]
      // 先清空之前的数据
      this.vinGroup = [
        ...this.vinGroup,
        ...vinList.filter(vin => !!vin).map(vin => ({
          result: vin.length === 17,
          vin,
          message: vin.length === 17 ? '' : '请输入合法的vin号'
        }))
      ]
      // 双向绑定vinList
      this.$emit('input', this.vinList)
    },

    /**
     * vin输入框失去焦点的方法
     */
    handleVinInputBlur() {
      // 给vin加上;
      this.vinInput = this.vinInput + ';'
      // 将当前输入的vin初始化成需要校验的参数
      this.handleVinInput()
    },

    /**
     * vin输入的改变方法
     */
    handleVinItemChange(value, index) {
      // 如果当前没有输入值
      if (!value) {
        this.vinGroup.splice(index, 1)
      } else {
        // 替换中文的分号
        const replaceChinessSemicolon = value.replace(/[;,,\s\r\n]/g, ';')
        // 按逗号分割
        const vinList = replaceChinessSemicolon.split(';').filter(vin => !!vin)
        // 如果当前长度大于1个,说明输入了;
        if (vinList.length >= 1) {
          // 将当前输入的数据插到原来的对象中
          vinList.forEach((vin, vIndex) => {
            this.vinGroup.splice(index + vIndex, vIndex === 0 ? 1 : 0, {
              result: vin.length === 17,
              vin,
              message: vin.length === 17 ? '' : '请输入合法的vin号'
            })
          })
        }
      }
      // 重新赋值
      this.vinList = this.vinGroup.map(vin => vin.vin)
      // 双向绑定vinList
      this.$emit('input', this.vinList)
    },

    /**
     * 校验方法
     * @param results 需要回显的校验结果
     * @param index 当前需要校验的项目
     */
    validate(results = [], index = -1) {
      // 当前是否是错误
      let isError = true
      // 当前vin的集合
      const vinList = []
      // 写入错误信息
      this.vinGroup.forEach((group, gIndex) => {
        // 如果当前传入了需要校验的项目,则直接校验,如果没传,则全量校验
        if (index === -1 || gIndex === index) {
          // 如果当前vin输入的不合法
          if (group.vin.length !== 17) {
            isError = false
            group.result = false
            group.message = '请输入合法的vin号'
          } else {
            group.result = true
            group.message = ''
          }
          // 现在开始校验输入的结果
          results.forEach(result => {
            if (group.vin === result.vin) {
              group.result = result.checkResult
              group.message = result.errorMsg
              isError = isError && result.checkResult
            }
          })
          vinList.push(group.vin)
        }
      })
      // 如果校验有错误
      if (!isError) {
        throw new Error('请输入正确的VIN号')
      }
      return vinList
    }
  }
}
</script>

<style lang="scss">
.component-vin-input {
  .el-textarea {
    width: 836px;
    height: 100px;

    .el-textarea__inner {
      padding: 12px;
    }
  }

  .vin-input-wrapper {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    width: 836px;
    min-height: 100px;

    .vin-edit {
      display: inline-block;
      width: 199px;
      margin-left: 8px;
      margin-top: 8px;

      .el-input {
        width: 100%;
        height: 36px;

        .el-input__inner {
          background-color: #F7F8FA;
          border-color: #ffffff;
          box-shadow: none;
          color: #212026;
          font-size: 14px;
          font-weight: 400;
          padding: 0 10px;
        }
      }

      .error-tip {
        display: none;
        color: #FF4D4F;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        height: 18px;
        margin-top: 2px;
        position: absolute;
      }

      &.input-error {
        margin-bottom: 20px;

        .el-input {
          .el-input__inner {
            border-color: #FF4D4F;
          }
        }

        .error-tip {
          display: block;
        }
      }
    }

    .vin-input {
      display: inline-block;
      width: 199px;
      margin-left: 8px;
      margin-top: 8px;

      .el-input__inner {
        background-color: #FFFFFF;
        border-color: #ffffff;
        box-shadow: none;
        color: #212026;
        font-size: 14px;
        font-weight: 400;
        padding: 0 10px;
      }
    }
  }

  .vin-tip {
    color: rgba(132, 133, 138, 0.7);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    height: 18px;
    margin-top: 10px;
  }
}
</style>

实现表格中的批量编辑,可以在表格中添加一个“编辑”按钮或者复选框,当用户勾选了多个行或者点击了“编辑”按钮时,可以打开一个弹窗或者对话框,让用户同时编辑多个行的字段值。 以下是一个简单的示例: 1. 在表格中添加一个复选框列: ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' }, { name: '赵六', age: 35, gender: '女' } ] } } } </script> ``` 2. 在表格上方添加一个“编辑”按钮和一个勾选数量的显示: ``` <template> <div> <el-button type="primary" @click="handleEdit">编辑</el-button> <span v-if="selectedRows.length">已选{{selectedRows.length}}行</span> <el-table :data="tableData" style="width: 100%"> <!-- 省略表格列定义 --> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' }, { name: '赵六', age: 35, gender: '女' } ], selectedRows: [] } }, methods: { handleEdit() { // 弹出编辑对话框或者弹窗 } }, watch: { // 监听勾选的行 '$refs.table.selection': function(val) { this.selectedRows = val } } } </script> ``` 3. 在“编辑”对话框或者弹窗中显示被勾选行的字段值,并允许用户同时修改多个行的字段值: ``` <template> <el-dialog title="批量编辑" :visible.sync="dialogVisible"> <el-form :model="formData"> <el-form-item label="年龄"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item label="性别"> <el-radio v-model="formData.gender" label="男">男</el-radio> <el-radio v-model="formData.gender" label="女">女</el-radio> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="handleSave">保存</el-button> </div> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, formData: { age: '', gender: '' } } }, methods: { handleSave() { for (let row of this.selectedRows) { row.age = this.formData.age row.gender = this.formData.gender } this.dialogVisible = false } }, watch: { selectedRows: function(val) { if (val.length) { this.formData.age = val[0].age this.formData.gender = val[0].gender for (let row of val) { if (row.age !== val[0].age) { this.formData.age = '' } if (row.gender !== val[0].gender) { this.formData.gender = '' } } this.dialogVisible = true } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬不萌c

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值