dl_searchs v1.1.2

vue_search

A Vue.js project

下载

npm i dl_searchs --s

引入：在main.js文件中

import VueSearch from 'dl_searchs'

Vue.use(VueSearch)

使用示例

<template>
    <div>
      <VueSearch :search="search"
                 @change="changeType"
                 @click="searchOK"
                 @enter="onsubmit"
                 @createInquire = "createInquires"
                 @groupInquire = "groupInquire"
                 @searchRow = "searchRow"
                 style="margin-left:30%;">
      </VueSearch>
    </div>
</template>
<script>
  export default {
    name: 'DevSearch',
    components: {},
    data(){
      return {
        search:{
          selectItemsOne:[],//下拉菜单1
          typeOne:'',//下拉菜单1选中项的值
          placeholderSelectOne:'请选择字段',
          selectItemsTwo:[],//下拉菜单2
          typeTwo:'',//下拉菜单2选中项的值
          placeholderSelectTwo:'请选择条件',
          searchValue:'',//搜索框内容的值
          placeholderInput:'请输入内容',//搜索框提示文本
          clearable: true,//是否添加清空搜索框内容
          inquire:true,//是否显示查询按钮
          delete:true,//是否显示删除按钮
          selectClass: {    //下拉菜单的样式
            width:'120px ',
          },
          inputClass: {     //输入框的样式
            width:'250px'
          },
          tableData:[],//表格数据
          showHeader:true,//是否隐藏表头
          border:true,//是否添加边框
          tableRows:[ //表头数据
            {
              id:'1',
              prop:'displayName',
              label:'字段',
              width:'120',//表格宽度
              align:'center',//文本对齐方式
              show:true,//false隐藏当前列，true常规表格列，
            },
            {
              id:'2',
              prop:'logicFlag',
              label:'条件',
              width:'80',
              align:'center',
              show:true,
            },
            {
              id:'3',
              prop:'defaultValue',
              label:'输入内容',
              // width:'150',
              align:'center',
              show:true,
            },
          ],
        },
        searchData:[]
      }
    },
    created(){
      this.setSelectItemsOne()
      this.setSelectItemsTwo()

    },
    methods:{
      setSelectItemsOne(){
        this.search.selectItemsOne = [
          {
            value: 'id',
            label: 'id'
          },
          {
            value: 'code',
            label: '资源代码'
          },
          {
            value: 'name',
            label: '资源名称'
          },
          {
            value: 'content',
            label: '资源内容'
          }
        ]
      },
      setSelectItemsTwo(){
        this.search.selectItemsTwo = [
          {
            value: 'eq',
            label: '相等'
          },
          {
            value: 'lt',
            label: '小于'
          }, {
            value: 'gt',
            label: '大于'
          }
        ]
      },
      changeType(rows){
        //下拉菜单点击事件
        // console.log(rows)
      },
      searchOK(rows){
        //点击按钮发请求
        let json = {}
        for(let i = 0;i<this.search.tableRows.length;i++){
          json[this.search.tableRows[i].prop] = rows[i]
        }
        this.searchData = json
      },
      onsubmit(rows){
        //enter键发请求
        this.searchOK(rows)
        // this.searchData = rows
      },
      getSearch(rows){
        const obj = {}
        obj.displayName = rows[0]
        obj.logicFlag = rows[1]
        obj.defaultValue = rows[2]
        this.search.tableData.push(obj)
      },
      createInquires(rows){
        //添加查询项
        console.log(rows)
        this.getSearch(rows)
      },
      groupInquire(rows){
        //组合查询
        console.log(rows)
        this.searchData = rows
      },
      searchRow(index){
        //查询按钮的请求
        console.log(index)
        this.searchData = this.search.tableData[index]
      }
    },
  }
</script>

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

first commit