当前位置：首页 > article >正文

component-动态控制 div width 的值根据传入的变量决定width的值 vue

article 2025/1/11 15:27:19

1.实现

根据参数的值，div显示不同的长度

 <div class="node-line" :style="lineProgress"></div>

<script>
    export default {
      name: "trainSummaryInfo",
      data(){
        return{
          linePercentage:200,
        }
      },
      computed:{
        lineProgress(){
          const style = {}
          style.width = this.linePercentage +'px';
          return style
        }
      }
    }
</script>

<style >
  .node-line{
    position: absolute;
     width: 60px;
     height: 10px;
     left:20%;
    }
</style>

style里面定义变量，在计算属性里面，用变量控制width的值

循环根据数组长度定义div宽度

<table style="background-color: aqua;">
   <tbody>
      <!-- 宽度动态计算根据时间跨度长短 -->
         <tr v-for="(bodyData, index) in bodyData" :key="index" :style="lineProgress" class="bodyDay">
            <!-- 单元格的宽度通过任务时间长短来进行计算 -->
            <!-- 宽度偏移量按照当前任务开始日期*宽度 -->
            <!-- 拖动在tr内进行拖动 -->
            <!-- :style="{  width:bodyData.days.length * 60 +'px'}" -->
            <div :style="{  width:bodyData.days.length * 60 +'px'}" class="bodyDayItemDemo">12</div>
         </tr>
   </tbody>
</table>

            // 表体数据
            bodyData: [
                {
                    days: ['15', '16', ],
                },
                {
                    days: ['15', '15', '15'],
                },
                {
                    days: ['16', '17'],
                },
            ],