vue中进度条的使用
vue中进度条的使用
花飘零 发表于10个月前
vue中进度条的使用
  • 发表于 10个月前
  • 阅读 43
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

vue:

                    <table>
                        <thead class="thead">
                            <tr>
                                <th>序号</th>
                                <th>小组名称</th>
                                <th>组长</th>
                                <th>成员人数</th>
                                <th>项目进度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in items">
                                <td>{{item.id}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.gradePerson}}</td>
                                <td>{{item.person}}</td>
                                <td>
                                    <div class="progress">
                                        <span class="progressing" v-bind:style=" 'width:' + (item.time/17)*100 +'%' ">
                                            <span class="percentage">{{item.time}}/17</span>
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

js:

 data() {
        return {
            items: [
                {
                    id: '01',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '10',
                }, {
                    id: '02',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '5',
                }, {
                    id: '03',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '8',
                }]

        }

}

 

css:

              .progress{
                    width: 100%;
                    height: 15px;
                    background: #f1dea9;
                    border: 1px solid #ecc353 ;
                    border-radius: 10px;
                    text-align: center;
                    color:#fff;
                    .progressing{
                        position: relative;
                        float: left;
                        margin: 0 auto;
                        height: 16px;
                        background: #ecc353;
                        border-radius: 10px;
                        .percentage{
                            margin-left:50px;
                        }
                    }
                }

 

              

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 27
码字总数 2843
×
花飘零
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: