【无标题】

小嘉人

于 2023-04-13 17:15:19 发布

阅读量338

点赞数

文章标签： javascript 开发语言 ecmascript elementui

本文链接：https://blog.csdn.net/qq_39778525/article/details/130134763

版权

el-steps elementui 步骤条组件

修改el-steps样式，使步骤条的左右两侧都显示内容

      <div>
        <el-steps direction="vertical"> // vertical 代表竖形显示
          <el-step v-for="(item, index) in detail" :key="index" description="">
            <template slot="icon"> // 每个步骤左侧显示的图标
              <img :src="panoramaTitle2" style="width: 16px; height:16px">
            </template>
            <template slot="description"> // 每个步骤右侧显示的所有内容
              <div style="position:relative;">
                <div style="position:absolute; left: -90px; top: 0;color:#333333;font-size:14px;">
                  <div>{{ item.timeYear }}</div>// 显示的内容的标题1
                </div>
                <div style="position:absolute; left: 0px; top: 0;color:#999999;font-size:14px;">
                  <div>{{ item.timeDate }}</div>// 显示的内容的标题2
                </div>
                <div style="min-height:100px; padding-top: 30px;" :style="{'margin-right': index + 1 === detail.logs.length ? '10%' : ''}">
                  <div style="padding:10px 20px;box-sizing: border-box;background-color:#f2f6ff; border-radius:4px;color:#666666;font-size:14px;"> // 显示的主内容
                    {{ item.creatorName + ':' + ' ' + item.content }}
                  </div>
                </div>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
 <script>
export default {
  data() {
    return {
      detail: [
        { "id": "1", "content": "新增了一条合同记录", "creatorName": "系统管理员", "timeYear": "2023年", "timeDate": "04-11 09:31" },
        { "id": "2", "content": "新增了一条合同记录", "creatorName": "系统管理员", "timeYear": "2023年", "timeDate": "04-12 13:49" },
      ], // 需要循环显示的数据
    };
  },
};
</script>