Avue.js框架实现数字范围搜索

#惊蛰#

于 2024-08-07 11:36:12 发布

阅读量45

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/D47255/article/details/140987446

版权

Avue.js框架实现数字范围搜索

实现效果如下图所示：
数字范围搜索

option代码示例

下面代码是column下的

  {
      label: "所处桩号",
      prop: "mileBykm",
      formsolt:true,
      hide: true,
      span: 7,
      type: "number",
      rules: [{
        required: true,
        message: "请输入桩号",
        trigger: "blur"
      }]
    },
    { 
      label:"  + ",
      prop: "mileBym",
      labelWidth:20,
      formsolt:true,
      span: 5,
      hide: true,
      type: "number",
      dataType: "number",
      placeholder: "请输入桩号",
    },
      {
      label: "起点",
      prop: "beginMileBykm",
      formsolt:true,
      hide: true,
      search: true,
      searchSpan: 3,
      span: 7,
      display: false,
      type: "number",
      rules: [{
        required: true,
        message: "请输入桩号",
        trigger: "blur"
      }]
    },
    { 
      searchLabelWidth:20,
      label:"+",
      prop: "beginMileBym",
      labelWidth:20,
      formsolt:true,
      display: false,
      searchSpan: 2,
      search: true,
      span: 5,
      hide: true,
      type: "number",
      dataType: "number",
      placeholder: "请输入桩号",
    },
     {
      label: "终点",
      searchLabelWidth:50,
      prop: "endMileBykm",
      formsolt:true,
      hide: true,
      search: true,
      display: false,
      searchSpan: 2,
      span: 7,
      type: "number",
      rules: [{
        required: true,
        message: "请输入桩号",
        trigger: "blur"
      }]
    },
    { 
      searchLabelWidth:20,
      label:"+",
      prop: "endMileBym",
      labelWidth:20,
      formsolt:true,
      searchSpan: 2,
      display: false,
      span: 5,
      search: true,
      hide: true,
      type: "number",
      dataType: "number",
      placeholder: "请输入桩号",
    },

vue代码示例

crud

 <template slot-scope="scope" slot="mileBykmLabel">
    <span>所处桩号:&nbsp;&nbsp;&nbsp; K</span>
    </template>
    <template slot-scope="scope" slot="mileBymLabel">
      <span> + &nbsp;&nbsp;</span>
    </template>
    <template slot-scope="scope" slot="beginMileBykmSearchLabel">
    <span>起止桩号:&nbsp;K</span>
    </template>
    <template slot-scope="scope" slot="beginMileBySearchmLabel">
      <span>+</span>
    </template>
    <template slot-scope="scope" slot="endMileBykmSearchLabel">
    <span>—&nbsp;&nbsp;&nbsp;K</span>
    </template>
    <template slot-scope="scope" slot="endMileBymSearchLabel">
      <span>+</span>