el-timeline的实现左右布局

首先阅读element官网的文档，发现并没有相关的布局的属性，所以想到的办法就是对dom进行位置的样式修改，移动到左边去

image.png

将timeline-item的子dom的样式改为absolute布局，left左边偏移

.leftStyle {
  position: absolute;
  left: -200px;
  top: 1px;
  font-size: 12px;
}


#appStyle {
  position: relative;
  top: 50px;
  left: 250px;
  width: 50%;
}

源码:

<template>
  <div class="sf-reset-password">
    <el-dialog
        :visible.sync="isVisible"
        width="800px"
        :close-on-click-modal="false"
        title="版本信息"
        :before-close="dialogBeforeClose"
    >
      <!-- 设置对话框内容高度 -->
      <div style="height:65vh">
        <el-scrollbar style="height: 100%">
          <div id="appStyle">
            <el-timeline :reverse="true">
              <el-timeline-item v-for="(item,key) in timeLineData" :key=item.id
                                placement="top"
                                :color="colorArr[item.id%4]">
                <div class="leftStyle">
                  <div>
                    <el-tag type="danger">{{ item.versionTitle }}</el-tag>
                    <el-tag type="success" style="margin-left: 10px">{{ item.publisher }}</el-tag>
                  </div>
                  <div>
                    <el-tag>{{ item.gmtCreate }}</el-tag>
                  </div>
                </div>
                <div>
                  <el-card style="width: 450px">
                    <!--                <el-tag type="danger">{{ item.versionTitle }}</el-tag>-->
                    <!--                <el-tag type="success" style="margin-left: 10px">{{ item.publisher }}</el-tag>-->
                    <p v-html="item.versionLog" style="text-align:left"></p>
                  </el-card>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import {Component, Vue} from "vue-property-decorator";
import API from "@/api/api";


@Component({
  metaInfo: {
    title: "能源监管系统-系统版本"
  }
})
export default class UserReset extends Vue {
  isVisible: boolean = false;
  isLoading: boolean = false;
  timeLineData: Object = {};
  colorArr: Array<String> = ['red', 'green', 'blue', 'pink'];

  API_USER: any = API.systemSetting;

  mounted() {
    this._excute();
  }

  dialogBeforeClose() {
    this.isVisible = false;
  }

  cancel(formName: string) {
  }

  //执行请求
  _excute() {
    this.isLoading = true;
    this.API_USER.systemVersion('8000')
        .then((res: any) => {
          this.timeLineData = res.data;
          this.isVisible = false;
        })
        .finally(() => {
          this.isLoading = false;
        });
  }
}
</script>

<style lang="scss" scoped>
.leftStyle {
  position: absolute;
  left: -200px;
  top: 1px;
  font-size: 12px;
}


#appStyle {
  position: relative;
  top: 50px;
  left: 250px;
  width: 50%;
}
</style>

效果图：

image.png