vue3 element-ui的插槽使用（scope）

Lavandula angustifolia.

于 2023-05-29 11:33:34 发布

阅读量1.4k

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/qq_45955391/article/details/130924703

版权

文章展示了如何在Vue3中利用Element-UI的插槽功能来自定义el-table组件的一列内容，特别是通过scope属性来绑定数据，并根据数据动态设置样式。示例中，根据dataList中的name1字段值，改变状态列显示的小圆点颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table 使用插槽举例

自定义表格的一项内容

<el-table-column prop="name1" label="状态" >
   <template #default="scope">
       <span>&nbsp;&nbsp;</span>
       <span class="dot" :class="scope.row.name1=='进行中'?'green':scope.row.name1=='已取消'?'glay':scope.row.name1=='待接单'?'blue':''"></span>
       <span>{{scope.row.name1}}</span>
   </template>
</el-table-column>

样式

.dot{
    content: "";
    display: "";
    width:10px;
    height: 10px;
    background: black;
    position: absolute;
    left: 5px;
    top:14px;
    border-radius: 50%;
}

.green{
    background: rgb(43, 194, 43);
}
.blue{
    background: #67b7dc;
}
.glay{
    background: #dddddd;
}
.red{
    color:red;
}