elementUI问题记录

xinxin_csdn

已于 2023-04-23 18:40:48 修改

阅读量2.4k

点赞数

分类专栏： elementUi vue 文章标签： DateTimePicker

于 2021-04-29 15:43:09 首次发布

本文链接：https://blog.csdn.net/xinxin_csdn/article/details/116270454

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

elementUi

1 篇文章 0 订阅

订阅专栏

1、DateTimePicker设置 value-format="yyyy-MM-dd HH:mm:ss" 报错 dateObject.getTime is not a function

原因：

1.初始化 value值是设置为字符串了，改为 new Date();

2.去掉 rules中的 type:'date'

rules: {

date: [ { required: true, message: '请选择日期', trigger: 'change' } ]

}

2、el-select修改select-dropdown展开框的样式不生效

原因：渲染后的dom元素压根儿就不在#app元素内部，el-select里面的el-select-dropdown元素渲染后会脱离#app

解决办法：el-select 上增加一个属性:popper-append-to-body="false"，这个属性用于将渲染后的元素放入#app元素。

3、date-picker修改选择日期panel样式不生效

<el-date-picker

:append-to-body="false"

style="margin-left: 10px"

v-model="dateRangeValue"

type="daterange"

start-placeholder="开始日期"

end-placeholder="结束日期"

>

</el-date-picker>

4.el-progress设置颜色是渐变色、在进度后边加一个图标并设置同步动画

<template>
  <div class="city-water-data-wrap">
        <ul class="progress">
          <li :class="{ active: curSelectRiverId === item.rivcd }" v-for="(item, index) in riverListArr" :key="item.rivcd" @click="handleClickPro(item)">
            <span class="text">{{ item.name }}</span>
            <el-progress :class="['progress-item', `rank${index}`]" :percentage="item.floodPressure" :show-text="false"> </el-progress>
            <span class="num" :style="{ color: colorArr[index] }">{{ item.floodPressure }}%</span>
            <div class="img-icon-container"><i class="imgIcon" :style="getImgStyle(item.floodPressure)"></i></div>
          </li>
        </ul>
  </div>
</template>
<script>
import { getRiverList } from '@/largeScreen/api/cityWater.js'

export default {
  name: 'CityWaterData',
  data() {
    return {
      
      curSelectRiverId: '',
      
    }
  },
  props: {
   
  },
  components: {
    
  },
  created() {
    this.getRiverListData()
  },
  mounted() {},
  methods: {
    getImgStyle(num) {
      let style = {}
      if (num > 0) {
        style = {
          left: 'calc(' + `${num}%` + ' - 3px)',
          transition: 'left 0.6s ease'
        }
      } else {
        style = {
          // display: 'none'
          left: '-3px',
          transition: 'left 0.6s ease'
        }
      }
      return style
    },
   
    getRiverListData() {
      const { stm, etm } = this.$parent.queryInfo
      let params = {
        area: chengQuArea,
        etm,
        stm
      }
      getRiverList(params).then(res => {
        this.riverListArr = res.listiverVo || []
      })
    },
    
  },
  watch: {
    
  }
}
</script>
<style lang="scss" scoped>
.city-water-data-wrap {
  
    .progress {
      flex: 1;
      li {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        position: relative;
        height: 22px;
        &:last-child {
          margin-bottom: 0;
        }
        &.active {
          background: rgba(255, 255, 255, 0.2);
        }
        .text {
          display: inline-block;
          width: 45px;
          margin-right: 5px;
          text-align: right;
        }
        .progress-item {
          // width: 99%;
          flex: 1;
          /deep/.el-progress-bar__outer {
            height: 7px;
            border-radius: 0px;
            background-color: #035d49;
          }
          /deep/.el-progress-bar__inner {
            border-radius: 0;
          }
          &.rank0 {
            /deep/.el-progress-bar__inner {
              background: linear-gradient(-90deg, #00dbfc, rgba(2, 18, 15, 0));
            }
          }
          &.rank1 {
            /deep/.el-progress-bar__inner {
              background: linear-gradient(-90deg, #ffd400, rgba(2, 18, 15, 0));
            }
          }
          &.rank2 {
            /deep/.el-progress-bar__inner {
              background: linear-gradient(-90deg, #ff3116, rgba(2, 18, 15, 0));
            }
          }
          &.rank3 {
            /deep/.el-progress-bar__inner {
              background: linear-gradient(-90deg, #00acfc, rgba(2, 18, 15, 0));
            }
          }
          // /deep/.el-progress-bar__inner::after {
          //   width: 13px;
          //   height: 16px;
          //   display: block;
          //   background-image: url('~@/largeScreen/assets/images/triangle-cyan.png');
          //   background-size: 100% 100%;
          // }
        }
        .num {
          position: absolute;
          top: -12px;
          right: 0;
          color: #03d6f5;
          font-weight: bold;
        }
        .img-icon-container {
          position: absolute;
          left: 50px;
          width: calc(100% - 50px);
          height: 100%;
        }
        .imgIcon {
          position: absolute;
          left: 0;
          top: 4px;
          width: 13px;
          height: 16px;
          display: block;
          // backgroundImage: 'url(' + require('@/largeScreen/assets/images/triangle-cyan.png') + ')',
          background-image: url('~@/largeScreen/assets/images/triangle-cyan.png');
          background-size: 100% 100%;
        }
      }
    
 
}
</style>

5.el-table 折叠点击无效 row-key必传父级数据增加childre 父级和子级数据都得添加有 row-key设置的字段

<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

6. el-table设置合并项

getSpanArr() {
      let position // 当前合并的行位置（连续相同名称的第一条数据位置）
      this.spanArr = []
      for (var i = 0; i < this.historyTableList.length; i++) {
        if (i === 0) {
          // 第一行  不进行处理
          this.spanArr.push(1)
          position = 0
        } else {
          if (this.historyTableList[i].ymd === this.historyTableList[i - 1].ymd) {
            // 当条数据跟上一条数据名称相同，要合并
            this.spanArr[position] += 1 // // 首条相同名称行合并行数增加
            this.spanArr.push(0) // 当前行消除
          } else {
            this.spanArr.push(1)
            position = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex] // 合并行数
        const _col = _row > 0 ? 1 : 0 // 合并列数，1：不改变，0：被消除
        return {
          rowspan: _row, //rowspan:单元格可横跨的行数
          colspan: _col //colspan:单元格可横跨的列数
        }
      }
    }

7、页面中e-dialog嵌套使用时，关闭内层的dialog后，蒙版仍存在

原因：

这是因为dialog的蒙层默认都是插入到body（modal-append-to-body默认是true）的，然后它的z-index是动态生成，默认是2000，内容区域的z-index也是动态生成，默认是2001，它们的定位都是fixed,但是内容区域的z-index会比蒙层的大1，导致内容区域可以高亮。

然后你嵌套的dialog显示后，它的蒙层也是替换第一个dialog的蒙层，同样插入到body，然后它的z-index会递增，是2002，它的内容区域是2003。正常是没有问题，内容区域比蒙层的大。此时这个嵌套内容是在第一个dialog下面的，虽然它的z-index比蒙层的大，但是会以第一个dialog内容区域的z-index为准，去和蒙层比较，因为它的z-index（2001）比蒙层的z-

index(2002)小，所以导致被盖住了。

解决方案
dialog设置:append-to-body=“true”
默认dialog的内容区域是在当前元素下的，当然嵌套的dialog也是一样。如果我们把嵌套的dialog的内容区域插入到body下，因为它的z-index是比蒙层高，这样就不用因为父元素的z-index小导致被盖住了

<el-dialog title="外层dialog" :append-to-body="true">
    <div>
        <el-dialog></el-dialog>
    </div>
</el-dialog>

xinxin_csdn

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
elementUI问题记录

elemntUI遇到的问题记录
复制链接

扫一扫

专栏目录

elementUI问题记录

“相关推荐”对你有帮助么？