element问题总结

置顶 zhougl996

已于 2024-05-13 16:42:28 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue.js html

于 2021-09-13 17:39:38 首次发布

本文链接：https://blog.csdn.net/aoutlaw/article/details/120271747

版权

前端专栏收录该内容

55 篇文章 2 订阅

订阅专栏

1.table行样式row-style 单元样式cell-style

    <el-table :data="tableData" :row-style="tableRowStyle" border>
      <el-table-column prop="shoudlPay" label="应收费" align="center"></el-table-column>
    </el-table>
// 方法
tableRowStyle({
        row,
        rowIndex
      }) {
        // 注意，这里返回的是一个对象
        let res = {};
        if (row.shoudlPay.includes("综合账单vs明细账单")) {
          res.color = 'red';
          res.background = 'blue';
        } 
        return res ;
      },

2.element-vue中el-table去除鼠标悬停背景色

.el-table /deep/ tbody tr:hover>td { 
    background-color:#ffffff!important
}

3.el-table el-table-column template 列函数

<el-table v-loading="loading" :data="AILists" border>
    <el-table-column prop="id" label="用户ID" align="left"></el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
            <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="handleMore(scope.row)"
            >详情</el-button>
        </template>
    </el-table-column>
    <el-table-column label="月环比" align="center">
        <template slot-scope="scope">
            <span style="color: #FFBA00;">
                {{ scope.row.Rate + '%'}}
            </span>
            <span v-html="getArrow(scope.row.Rate)"></span>
        </template>
    </el-table-column>
</el-table>

// scope.row 能获取当前行的数据
handleMore(row) {
    row
    debugger
}
getArrow(num) {
    if (num > 0) {
        return '<i class="el-icon-top" style="color:red;margin-left:6px" ></i>'
    } else if (num < 0) {
        return '<i v-if="scope.row.recordsRingRatio <= 100" class="el-icon-bottom"'
        +' style="color:#1ed689;margin-left:6px" ></i>'
    } else if (num = 0) {
        return ''
    }
},

4.el-menu菜单

<el-menu  default-active="2"  class="el-menu-vertical-demo">
      <el-submenu v-for="item in leftTree" :key="item.id" :index="item.id">
        <template slot="title"><span>{{item.label}}</span></template>
            <div v-if="item.children">
                <div v-for="(subitem, subindex) in item.children" :key="subindex">
                    <el-menu-item :index="subitem.code" @click="handleShowThisData(subitem)">{{subitem.label}}</el-menu-item>
                </div>
            </div>
    </el-submenu>
</el-menu>

5. :rules 检测 el-date-picker数组

<el-form-item label="时间" prop="time">
    <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
    end-placeholder="结束时间" size="mini" @change="change" format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyyMMddHHmmss">
    </el-date-picker>
</el-form-item>

rules: {
  time: [{
    type: 'array',
    required: true,
    message: '请选择日期区间',
    fields: {
      0: {
        type: 'string',
        required: true,
        message: '请选择开始日期'
      },
      1: {
        type: 'string',
        required: true,
        message: '请选择结束日期'
      }
    }
  }]
},

6.修改el-transfer的按钮为垂直样式

  .my-transfer /deep/.el-transfer__button {
    display: block !important;
  }

  .my-transfer /deep/ .el-transfer-panel__body {
    height: 180px;
  }

  .my-transfer /deep/ .el-transfer-panel__list.is-filterable {
    height: 75%;
    padding-top: 0;
  }

  .my-transfer /deep/ .el-button+.el-button {
    margin-left: 0px;
  }

  .my-transfer /deep/ .el-transfer-panel {
    width: 38%;
  }

7.:rule检测数字

test: {
    required: true,
    type: 'number',
    transform(value) {
        if (value) {
            return Number(value);
        }
    },
    message: '请输入透支金额(数字)',
    trigger: 'blur'
},

8.element中可以输入table表格（双击可以修改输入）

也可以用scope.$index el-table的顺序

<el-table align="center" :data="templateTable" @row-dblclick="dbclick">
    <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
            <el-input v-if="scope.row.isOK" v-model="scope.row.name" ></el-input>
            <span v-else>{{scope.row.name}}</span>
        </template>
    </el-table-column>
</el-table>

templateTable: [{
    name: '张三',
    isOK: false,
  },{
    name: '李思',
    isOK: false,
  }],

  dbclick(row, event, column) {
    row.isOK = !row.isOK
  },

9.在el-tabs组件最右侧添加按钮

使用CSS来实现，css原理解释：

1.如果div的position设置了relative属性，但是没有指定偏移量，则相当于默认的position：static；

2.position：static 默认值，没有定位，元素出现在正常的流中；

3.position：absolute 绝对定位相对于定位方式不是static的第一个父元素进行定位（往上寻找参照元素，一直到根元素为止，即body）；

<div style='position: relative;'>
  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="Tab页签标题1" name="first">Tab页签内容1</el-tab-pane>
    <el-tab-pane label="Tab页签标题2" name="second">Tab页签内容2</el-tab-pane>
  </el-tabs>
    <el-button size='mini' style='position: absolute;right:10px;top:5px;'>右边按钮</el-button>
  </div>

10.弹框关闭，弹框中的select选项不关闭问题

方法一

<el-dialog :visible.sync="dialogVisible" width="50%" :append-to-body="true" center @close="handleClose">
    <el-select ref="carrerSelect" v-model="item.CondObjType" size="mini">
    <el-option
    v-for="itemPull in pull"
    :key="itemPull.itemId"
    :label="itemPull.itemName"
    :value="itemPull.itemId"
    ></el-option>
    </el-select>
</el-dialog>

// 方法
    handleClose() {
      this.$nextTick(function() {
        this.$refs.carrerSelect.forEach(v => {
          v.blur();
        });
      });
    },

方法二

el-dialog组件中的 destroy-on-close 属性

11.el-tooltip 设置宽度

1.方法1会影响其他页面不推荐(el-tooltip__popper不能加scoped)

<style>
  .el-tooltip__popper {
    max-width: 400px;
    line-height: 180%;
  }
</style>

2.方法2solt修改(设置宽度,不会影响其他页面)

<el-tooltip placement="top">         
	<template slot="content">
     	<p style="width:500px;">提示内容</p>
  	</template>
   	<div class="info-mes">展示内容</div>
</el-tooltip>

12.vue无法穿透elemet样式例如el-time-spinner__wrapper

popper-class="data-performance-monitor"

<el-date-picker v-model="time" type="datetime" popper-class="data-performance-monitor" format="yyyy-MM-dd HH">
</el-date-picker>

<style >
  .data-performance-monitor .el-time-spinner__wrapper{
     width:100% !important;
  }
</style>

13.rules写到el-form-item上

重要:
1. prop 必须用formParam.param

2. rules:随便选一个规则,例如 :rules="formParamRules.content"

或者 [{ required: true, message: '请输入活动主题', trigger: 'blur' }] 必须有中括号

<el-form ref="formParam" :model="formParam" label-width="120px">
    <el-form-item
        :rules="formParamRules.content"
        :prop="`param[${index}].value`"
        :label="`名称${index + 1}`">
        <el-input v-model="ref.value"></el-input>
    </el-form-item>
</el-form>

for(var i=0;i<10;i++){
    this.$set(this.formParam.param, i, {
        'key': i,
        'value': '',
        'name': name[i]
    })
}

formParamRules: {
content: [
        { required: true, message: '请输入活动主题', trigger: 'blur' }
    ],
}

14.el-row加上justify="center" 之后 el-col不换行

只需要给el-row 加上样式 style="flex-wrap: wrap; flex-direction: row"

<el-row type="flex" justify="center" style="flex-wrap: wrap; flex-direction: row">

15.页面报错：Invalid prop: custom validator check failed for prop “percentage“.

解决方法： 在<el-progress></el-progress>里边添加一个v-if的判断，判断一下你要的数据是否存在。

<el-progress :percentage="percentage" v-if="!isNaN(parseInt(percentage))"></el-progress>

16.修改default-active的值，不生效

默认打开菜单,但是default-active不生效

原因: 刷新菜单后,没有生成,需要在$nextTick之后重新赋值

<el-menu ref="menuAction">
</el-menu>

// 重新赋值
this.$nextTick(() => {
    this.$refs.menuAction.activeIndex = 'XXXXX'
})

17.element前台分页

<el-table :data="tableDataPage" border>
    <el-table-column prop="test" label="测试"></el-table-column>
    <el-table-column prop="test2" label="测试2"></el-table-column>
</el-table>

<el-pagination style="text-align: right;margin-top: 0.625rem;" :current-page.sync="page.PageNum" :page-sizes="[5,10,15,20]"
          :page-size="page.PageSize"layout="total, sizes, prev, pager, next":total="tableTotal"
          @size-change="(val) =>{page.PageSize = val;setPage()}" @current-change="(val)=>{page.PageNum = val;setPage()}"
        ></el-pagination>

data() {
    // 分页
    page: {
        PageNum: 1,
        PageSize: 5
    },
    tableTotal: 0,
    // 所有数据
    tableData: [],
    // 展示数据
    tableDataPage: []
}

methods: {

setPage() {
      this.tableTotal = this.tableData.length
      // 开始位置
      let startingPosition = (this.page.PageNum-1) * this.page.PageSize
      if (startingPosition > this.tableTotal) {
        this.tableDataPage = []
      } else {
        this.tableDataPage = this.tableData.filter((item,index) => {
          // 当前索引小于开始位置,返回false
          if (index < startingPosition) {
            return false
          } else {
            // 当前索引大于开始位置加页数显示的个数,返回false
            if (index >= (startingPosition + this.page.PageSize)) {
              return false
            } else {
              return true
            }
          }
        })
      }
    },
initTable() {
// 获得所有数据
this.tableData = XXXX.publicRequest()  
this.page.PageNum = 1
this.setPage()
}
}

18.element表格跨页多选

row-key属性和reserve-selection属性

原理类似于存在缓存,存储所有选择的数据,不会因为分页影响缓存数据,删除或者修改之后,需要this.multipleSelection = []

<el-table ref="table" :data="tableData" @selection-change="handleSelectionChange" row-key="id">
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>


<script>
method:{
    handleSelectionChange(val) {
        //这个val是所有已选中的json的数组
        this.multipleSelection = val;
    },
}
</script>

19.el-form设置disabled，要给其中的一个 `el-form-item` 取消禁用

<el-form label-width="100px" :model="form" size="mini" :disabled="true">
    <el-form-item label="禁用:">
      <el-button>禁用</el-button>
    </el-form-item>
    <el-form size="mini">
      <el-button>不禁用</el-button>
    </el-form>
</el-form>