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

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

elementUI中的e-table(自定义单元格样式)_第1张图片

上代码:其实就是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>

你可能感兴趣的:(element笔记)