elementUI公共输入框传值

elementUI公共输入框传值

 

 

 公共组件:

 

<template>
  <div class="bigDiv">
    <Layout>
      <Header>
        <!-- 搜索框 -->
        <div class="headerCon">
          <div class="left_Div">
            <span
              v-for="(item, index) in formInline.formInlineList"
              :key="index"
            >
              <b>{{ item.label }}</b>
              <Input
                search
                class="headerInput"
                v-model.trim="item.formInlineVal"
                :placeholder="item.placeHolder"
                @input="handlChange()"
              />
            </span>
          </div>
          <div class="right_Btn">
            <!--按钮 -->
            <Button
              v-for="(items, indexs) in formInline.formBtn"
              :key="indexs"
              class="search_reset"
              @click="handel(indexs)"
              >{{ items.btnLabel }}</Button
            >
          </div>
        </div>
      </Header>
    </Layout>
  </div>
</template>

<script>
import "element-ui/lib/theme-chalk/index.css";
import "iview/dist/styles/iview.css";
export default {
  components: {},
  watch: {},
  props: {
    labelVal: Object
  },
  data() {
    return {
      formInline: {
        formInlineList: [
          {
            index: 1,
            formInlineVal: "",
            label: this.labelVal.code,
            placeHolder: "请输入场馆编号"
          },
          {
            index: 2,
            formInlineVal: "",
            label: this.labelVal.name,
            placeHolder: "请输入场馆名称"
          },
          {
            index: 3,
            formInlineVal: "",
            label: this.labelVal.address,
            placeHolder: "请输入场馆地址"
          }
        ],
        formBtn: [
          {
            index: 1,
            btnLabel: "重置"
          },
          {
            index: 2,
            btnLabel: "搜索"
          }
        ]
      }
    };
  },
  computed: {},
  methods: {
    //   按钮
    handel(indexs) {
      if (indexs == 0) {
        this.$emit("reset", this.emptyVal());
        this.emptyVal();
      } else if (indexs == 1) {
        this.$emit("search", this.setVal());
      } else {
        return false;
      }
    },
    //     输入框
    handlChange() {
      if (
        this.formInline.formInlineList[0].formInlineVal == "" &&
        this.formInline.formInlineList[1].formInlineVal == "" &&
        this.formInline.formInlineList[2].formInlineVal == ""
      ) {
        this.$emit("InputChange", this.setVal());
      } else {
        return false;
      }
    },
    //     localStorage
    setVal() {
      const Val = {
        codeVal: this.formInline.formInlineList[0].formInlineVal,
        nameVal: this.formInline.formInlineList[1].formInlineVal,
        addressVal: this.formInline.formInlineList[2].formInlineVal
      };
      return Val;
    },
    emptyVal() {
      this.formInline.formInlineList[0].formInlineVal = "";
      this.formInline.formInlineList[1].formInlineVal = "";
      this.formInline.formInlineList[2].formInlineVal = "";
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" type="text/css" scoped>
.bigDiv {
  .ivu-layout-header {
    height: 132px;
    background: #fff;
    padding-top: 44px;
    padding-bottom: 44px;
    .headerCon {
      width: 100%;
      height: 100%;
      line-height: 44px;
      text-align: left;
      display: flex;
      .left_Div {
        float: left;
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          display: block;
          height: 100%;
        }
      }
      .right_Btn {
        width: 220px;
        height: 100%;
        float: right;
        .search_reset {
          height: 100%;
          margin-top: -6px;
          width: 97px;
        }
        .search_reset:nth-child(1) {
          margin-right: 24px;
        }
        .search_reset:nth-child(2) {
          background: #688ef7;
          color: #fff;
        }
      }
      b {
        font-size: 15px;
        font-family: "PingFangSC";
        font-weight: 500;
        color: rgba(85, 85, 85, 1);
        margin-right: 28px;
      }
      /* 输入框 */
      .ivu-input-wrapper/deep/ {
        height: 111%;
        width: 270px;
        margin-right: 28px;
        .ivu-input {
          height: 90%;
        }
        .ivu-input-icon {
          line-height: 46px;
          font-size: 20px;
        }
      }
    }
  }
}
</style>

 

父组件:

 

结构：
<HeaderSearch
      :labelVal="labelVal"
      @reset="resetA"
      @InputChange="InputChange"
      @search="search"
></HeaderSearch>

js:
data中:
submitVal: {
     code: "",
     name: "",
     address: ""
}

事件:
// 模糊搜索

// 子组件自定义事件

    search(Val) {

      this.byValue(Val);

      this.getList();

    },

    resetA(Val) {

      this.byValueTwo(Val);

      this.getList();

    },

    sey() {

      setTimeout(() => {

        this.getList();

      }, 1);

    },

    InputChange(Val) {

      this.byValue(Val);

      this.getList();

    },

    byValue(Val) {

      this.submitVal.code = Val.codeVal;

      this.submitVal.name = Val.nameVal;

      this.submitVal.address = Val.addressVal;

    },

    byValueTwo(Val) {

      this.submitVal.code = Val;

      this.submitVal.name = Val;

      this.submitVal.address = Val;

    }