element ui 常用配置【持续更新】

el-dialog 对话框

    <el-dialog
      :title="showTitle"
      :visible.sync="myDialogVisible"
      append-to-body
      @open="showMap()"
      destroy-on-close

        :close-on-click-modal="false"

      custom-class="my-class"
      top="5vh" width="85%"
    >
      <el-row style="height: 600px">
        <div class="h-100" id="map-container" />
      </el-row>
    </el-dialog>

dialog中的元素调用找不到时，使用@open打开对话框后回调

   showMap() {
      this.$nextTick(() => {
        this.setTouristRouteChart('placeHotRouteChart', 14.9)
      })
    },

样式修改在全局样式中自定义 my-class 样式

 

 

el-carousel走马灯

              <el-carousel class="comment-carousel" style="height: calc(100% - 0px);" height="calc(100% - 0px)" direction="horizontal" indicator-position="none" arrow="always" :autoplay="true">
                <el-carousel-item class="h-100">
                  <el-row style="height: 32px;">
                    <div class="i-inner-title">关系图1</div>
                  </el-row>

                  <el-row style="height: calc(100% - 32px);">
                    <div id="placeTrafficChart" class="h-100"></div>
                  </el-row>
                </el-carousel-item>

                <el-carousel-item class="h-100">
                  <el-row style="height: 32px;">
                    <div class="i-inner-title">路线图</div>
                  </el-row>

                  <el-row style="height: calc(100% - 32px);">
                    <div id="placeHotRouteChart2" class="h-100" @click="routeMapVisible=!routeMapVisible"></div>
                  </el-row>
                </el-carousel-item>
              </el-carousel>

 

 

 

走马灯分片，如下为评论分片

每片中7行，设置 height: 14%，

               <el-carousel class="comment-carousel" style="height: calc(100% - 52px);" height="calc(100% - 0px)" direction="horizontal" indicator-position="none" arrow="always" :autoplay="true">
                  <el-carousel-item v-for="(item,index) in commentTableData" :key="index">
                    <div v-for="(i, index) in item" :key="index" style="height: 14%; display: flex">
                      <el-tooltip :content="i.content" placement="top" :popper-class="'comment-tooltip'">
                        <div class="comment-body2" style="width: 100%;">{{ i.content }}</div>
                      </el-tooltip>
                    </div>
                  </el-carousel-item>
                </el-carousel>

 

自定义tooltip样式，设置在popper-class中，对应样式需要设置在全局样式中

<style lang="scss" >
.el-tooltip__popper.comment-tooltip {
  font-size: 26px;
}
.el-tooltip__popper {
  font-size: 26px;
  max-width: 50vw;
  line-height: 1.5;
}

</style>

 

数据处理，将所有评论重新分组存入列表中，使用$set触发页面DOM更新

          var lineNum = this.commentTableDataLine // 7个为一组
          var tmp = []
          allComment.forEach((item, index) => {
            tmp.push(item)
            if (index % lineNum == (lineNum-1)) {
              // this.commentTableData[Math.floor(index/lineNum)] = tmp  // 不会触发DOM更新
              this.$set(this.commentTableData, Math.floor(index / lineNum), tmp)  // floor 向下去尾取整
              tmp = []
            }
          })