elementUI中的e-table(自定义单元格样式)

说明一下,首先想实现的样式
就是单元格中间,或者两边是自定义样式,其他是默认的

《elementUI中的e-table(自定义单元格样式)》

上代码:其实就是template里面判断,刚开始我是在写多个template,然后判断,后面发现死活不行,最后突然想到会不会是只预留了一个插槽,所以在里面判断。最后完美解决。

 <template slot-scope="scope">
            <!-- 自定义操作 -->
            <div v-if="item.descEn==='operation'">
              <el-button type="text" size="small" @click="goto(scope.row)">查看详细</el-button>
              <el-button type="text" size="small" @click="goto(scope.column)">定位</el-button>
            </div>

            <!-- 自定义状态样式 -->
            <div v-else-if="item.descEn==='status'">
              <el-button type="info" plain disabled>{ {  scope.row.status }}</el-button>
            </div>

            <!-- 自定义链接 -->
            <el-link
              v-else-if="item.descEn=='affiliation'"
              type="primary"
            >{ {  scope.row[scope.column.property] }}</el-link>

            <!-- 自定义wifi -->
            <el-progress v-else-if="item.descEn=='wifi'" :percentage="scope.row.wifi" />

            <!-- 默认样式 -->
            <span v-else>{ {  scope.row[scope.column.property] }}</span>
          </template>
    原文作者:鲨鱼小猫
    原文地址: https://blog.csdn.net/qq_45549336/article/details/107825424
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞