记录使用element常用属性其用法

Vue中使用element-ui

1、clearable

在input、select框中选择选项，鼠标放到框中显示x清空选中项

<el-input v-model="searchList.paperName" placeholder="请输入" clearable></el-input>

2、disabled   :model="searchList"

针对form表单设置全局disabled    :disabled="变量名称"

针对form表单设置全局变量    :model="searchList"

<el-form
  :disabled="editFlag"
  :model="questionnaireData"
  :rules="rules"
  ref="questionnaireData"
  label-width="100px"
  size="small"
>
  <el-select 
    class="inner-position-select" 
    v-model="searchList.questionCategory" 
    clearable         
    placeholder="请选择">
    <el-option
      v-for="item in business"
      :key="item.value"
      :label="item.value"
      :value="item.value"
      :disabled="item.disabled"
    ></el-option>
  </el-select>
</el-form>

data: {
  searchList: {
    questionCategory: '',
    questionStatus: '',
    questionType: '',
    stemHtml: ''
  },
}

3、:index='count'    table表格第一列序号设置   

      align="center"    表头居中

     :show-overflow-tooltip="true"     居文字超长省略...   需设置最小宽

<el-table-column 
        type="index" 
        :index="count" 
        label="序号" 
        align="center" 
        :show-overflow-tooltip="true"
        min-width="150">
</el-table-column>

methods: {
    count (index) {
      return (this.currentPage - 1) * this.pageSize + index + 1
    },
}

4、fixed="right" table表格设置下方横向滚动条 

注意的是需要设置最小宽度  min-width

<el-table-column label="操作" align="left" min-width="660" fixed="right">
</el-table-column>

5、在页面中使用loading

5.1   在table表格中使用loading，table表格中使用loading不需要引入loading，直接使用

<v-table
  :data="tableData"
  ref="table"
  :listLoading="listLoading"
  :loadingText="loadingText"
  :paginationTotal="total"
  v-on:pageSizeChange="pageSizeChange"
  v-on:currentPageChange="currentPageChange"
  border=""
  pagination
  size="small"
>
</v-table>

// data中默认显示为true   调用接口之前设置为true 结束调用为false
data: {
    listLoading: true,
    loadingText: ''
}

methods: {
  fetchList () {
    this.listLoading = true
    const data = {
      smodel: {
        questionCategory: this.searchList.questionCategory,
        questionStatus: this.searchList.questionStatus,
        questionType: this.searchList.questionType,
        stemHtml: this.searchList.stemHtml,
        questionCategoryList: this.searchList.questionCategory
      },
      pageSize: this.pageSize,
      currentPage: this.currentPage
    }
    fetchList(data).then(response => {
      this.listLoading = false
      const data = response.data
      if (data.success) {
        let options = data.data.list
        this.tableData = options
        this.total = data.data.total
      }
    }).catch(error => {
      Message.error(error)
    })
  }
}

5.2   在全局中使用loading效果，在组件页面引入loading

import { Message, MessageBox, Loading } from 'element-ui'

methods: {
    loading () {
      let loading = Loading.service({
        lock: true,
        text: '',
        color: 'red',
        spinner: '',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return loading
    },
    fetchQuestion (npsQuestionPk) {
      let loading = this.loading()
      fetchQuestion(npsQuestionPk).then(response => {
        loading.close()
      }).catch(error => {
        loading.close()
        Message.error('系统异常')
      })
    },
}

important  修改loading动画。需要覆盖旧的loading效果，因此全局添加以下代码段

.el-loading-text {
  color: transparent;
}
.el-loading-mask {
  .el-loading-spinner .circular{
    color: transparent;
    display: none;
  }
  .el-loading-spinner{
    background: url(../assets/login-images/Loading.gif) no-repeat;
    background-size: 48px 48px;
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%;
    left: 45%;
  }
}

6、登录页面点击enter实现按钮登录

<el-input 
    type="text" 
    v-model="loginForm.identifyCode" 
    @keyup.enter.native="handleLogin" 
    clearable 
    class="identify-code" 
    placeholder="请输入验证码">
</el-input>

7、element-table表格hover颜色修改。操作部分也一起修改。第一次没记下来，第二次遇到头痛死了立马记下来。

.el-table__body tr.hover-row>td {
  background-color: #F8F8F8;
}

8、CSS样式 一行省略、两行省略、三行省略

/* 超出单行省略 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

/* 超出两行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

/* 超出三行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

9、CSS样式针对input、textarea框的 "placeholder" 文字样式进行设置

input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
  font-size: 13px;
  font-family: 'PingFangSC-Regular, PingFang SC';
  font-weight: 400;
  color: #BBBBBB;
}
textarea::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
  font-size: 13px;
  font-family: 'PingFangSC-Regular, PingFang SC';
  font-weight: 400;
  color: #BBBBBB;
}

10、CSS样式针对伪类使用hover

.menu-wrapper>.el-submenu>.el-submenu__title:hover::before {
    position: absolute;
    content: '';
    width: 6px;
    height: 8px;
    top: 50%;
    margin-top: -4px;
    right: 20px;
    z-index: 999;
}

11、style标签里面添加内容