ele-search

一、使用方式

• 1、安装

  npm install ele-search
  或者
  yarn add ele-search

• 2、在项目中的main.js文件中引入

  import EleSearch from "ele-search"
  import "ele-search/lib/ele-search.css"
  Vue.use(EleSearch)

• 3、组件中使用

  <template>
    <div id="app">
      <div>搜索栏</div>
      <ele-search
        ref="searchBar"
        :config="searchBarConfig"
        :selections="selections"
      />
    </div>
  </template>
   
  <script>
    export default {
      name: "app",
      data() {
        return {
          searchBarConfig: {
            labelw: "120px",
            searchForm: {
              sources: [
                {
                  type: "text",
                  label: "客户姓名",
                  value: "",
                  prop: "custName",
                  rules: ""
                },
                {
                  type: "text",
                  label: "证件号码",
                  value: "",
                  prop: "certNo",
                  rules: ""
                },
                {
                  type: "text",
                  label: "手机号",
                  value: "",
                  prop: "mobile",
                  rules: ""
                },
                {
                  type: "datetimerangeOneMonth",
                  label: "开始日期",
                  value: "",
                  prop: "enterDate",
                  rules: ""
                },
                {
                  type: "select",
                  label: "是否授权",
                  value: "",
                  prop: "authed",
                  rules: "",
                  options: IS_AUTH
                }
              ]
            },
            searchBtn: [
              {
                text: "查询",
                icon: "el-icon-search",
                permissions: true,
                onClick: data => {
                  this.searchForm = data
                  this.toSearch(1, true)
                }
              },
              {
                text: "重置",
                icon: "el-icon-refresh",
                permissions: true,
                onClick: data => {}
              }
            ],
            extendBtn: [
              {
                text: "新增",
                icon: "",
                disabled: () => {
                  return false
                },
                permissions: true,
                onClick: data => {
                  console.log("点击新增")
                }
              }
            ]
          }
        }
      }
    }
  </script> 

二、主要的API

参数	类型	说明	默认值
selections	Object	表格选中的条数	空
config	Object	配置项，具体如上	{}