from 的使用

热爱敲代码

已于 2022-07-19 17:18:38 修改

阅读量247

点赞数

分类专栏： from 文章标签： vue.js

于 2022-07-19 11:25:25 首次发布

本文链接：https://blog.csdn.net/m0_55249356/article/details/125798136

版权

from 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一。from相关的使用

1.下拉框

<el-form-item label="使用状态" prop="status">
    <el-select v-model="queryParams.status" clearable placeholder="请选择">
        <el-option v-for="item in statusOptions" :key="item.value" 
            :label="item.label"  :value="item.value">
         </el-option>
     </el-select>
</el-form-item>

2.级联选择器

 <el-form-item label="异常类型" prop="typeId">
     <el-cascader class="form-cascader" v-model="queryParams.typeId" @change="handleChange" 
          clearable :options="typeOptions" :props="props" :show-all-levels="false">
     </el- cascader>
 </el-form-item>

3. 时间范围

 <el-form-item label="创建时间" prop="createTime">
     <el-date-picker v-model="queryParams.time" type="daterange" range-separator="至" 
         start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
  </el-form-item>

4.输入框--enter键搜索

<el-form-item label="发起人" prop="creator">
    <el-input v-model="queryParams.creator" placeholder="请输入发起人" 
      clearable @keyup.enter.native="handleQuery" />
</el-form-item>

二。form的显示--函数、css相关

1.添加折叠展开的按钮

添加按钮修改折叠与展开时不同的样式

使用了变量、函数、图标

 <div v-show="showPull" class="caret-bottom" @click="isExpand = !isExpand">
      <i :class="isExpand ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
 </div>

css样式

.caret-bottom {
  text-align: center;
}

.el-icon-caret-bottom,
.el-icon-caret-top {
  color: #BFBFBF;
  text-align: center;
  width: 126px;
  height: 14px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
  border-radius: 0px 0px 8px 8px;
  opacity: 1;
}
.el-icon-caret-top {
  color: #315DF1;
}

变量

showPull: false,
bAntiShike: false,
isExpand: false,

2.固定显示高度，超出收缩展开

将form用div包裹，添加class类名，设置相关样式后设置固定高度并超出部分隐藏

 <div class="inquire" :class="{ expand: isExpand }">
     <el-form class="myForm" :model="queryParams" ref="queryForm" size="small" 
       :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="所属工厂" prop="factoryId">
              <el-select v-model="queryParams.factoryId" clearable 
                placeholder="请选择" @change="handleFactoryChange">
                   <el-option v-for="item in factoryOptions" :key="item.value" 
                     :label="item.label" :value="item.value">
                   </el-option>
              </el-select>
        </el-form-item>
      </el-form>
</div>

css样式

.inquire {
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  overflow: hidden;
  height: 136px;
}
.inquire.expand {
  height: auto;
  overflow: initial;
}

关联的函数

//搜索框超过两行显示下拉框按键
  mounted() {
    window.onresize = () => {
      if (!this.bAntiShike) {
        this.bAntiShike = true
        setTimeout(() => {
          this.getWidth()
          this.bAntiShike = false
        }, 300)
      }
    }
    this.getWidth()
  },
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
  // 显示展开标签 多高
    getWidth() {
      //获取节点
      const node = document.getElementsByClassName('myForm')
      if (node && node[0]) {
        console.log(node[0].offsetHeight, "tyuio")
        node[0].offsetHeight > 114 ? this.showPull = true : this.showPull = false
      }
    }
  }

完成后