前端菜鸡流水账日记 -- 插槽自定义单元格内容

新的一周又来了，大家周一好哇，不知道大家上班开心吗，有没有一种想要发疯的冲动，哈哈哈哈，刚过完周末，但是显然是不够休息得，没办法，还是要继续上班咯，那我们废话不多说，来说下我今天遇到得问题吧，希望可以给大家带来帮助，也是自我学习得一种方式

今天得主要问题就是用插槽自定义了单元格得内容得展示，简单来说就是列表中，后端返回得是0123这种得数字，但是要求得效果其实是展示，开始，停止，故障等等汉字，这就需要我们前端进行处理，用什么处理呢，那自然就是用插槽了，template

 <Table
          :loading="initLoading"
          :columns="columns"
          :data="data"
          :scroll="{ y: tableHeight }"
        >
          <template v-slot:bodyCell="{ column, index, text }">
            <div v-if="['aa', 'bb'].includes(column.dataIndex)">
              {{
                text == 2 ? "故障" : text == 0 ? "否" : text == 1 ? "是" : text
              }}
            </div>
            <div v-if="column.dataIndex === 'title'">
              {{ index + 1 }}
            </div>
          </template>
        </Table>

• v-slot:bodyCell：定义了表格主体部分（tbody）的每个单元格（cell）的内容
• { column, index, text }：插槽 props，包含当前单元格对应的列信息（column）、行索引（index）和单元格文本（text）
•  v-if="['aa', 'bb'].includes(column.dataIndex)"：如果column.dataIndex的值在数组['aa', 'bb']中，使用三元运算符根据text的值来显示不同的文本： - text == 2：显示"故障"。 - text == 0：显示"否"。 - text == 1：显示"是"。 - 其他情况：直接显示text的值 （aa，bb...这些就是接口得对应得字段）
• v-if="column.dataIndex === 'title'"：如果当前单元格的column.dataIndex为'title'，则显示行号{{ index + 1 }}。这通常用于创建行编号

当然啦，对于div和v-if 可以写多个，进行多种判断，只要是在插槽内得都可以，三元运算符也是尤为重要，两者结合即可实现了单元格内容得自定义展示，灵活得实现展示得效果~~~

希望这篇笔记可以帮到需要得小伙伴，也希望可以提高我得技术，废话不多说，拿走试试效果吧，不好使你打我，下次见~