(vue)slot用法，iView表格中状态编号对应文字显示

最新推荐文章于 2023-11-17 14:35:38 发布

nyf_unknown

最新推荐文章于 2023-11-17 14:35:38 发布

阅读量537

点赞数

分类专栏： VUE 文章标签： vue.js view design 前端

本文链接：https://blog.csdn.net/qq_44754635/article/details/126391343

版权

VUE 专栏收录该内容

182 篇文章 2 订阅

订阅专栏

(vue)slot用法，表格中状态编号对应文字显示

修改前
在这里插入图片描述
修改后

在这里插入图片描述

代码：

<Table ref="selection" :columns="columns" :data="tableData">
  <template slot-scope="{ row }" slot="status"> //对应绑定
    <span v-if="row.status == 'INIT'">未执行</span>
    <span v-else-if="row.status == 'RUNNING'">执行中</span>
    <span v-else-if="row.status == 'FINISH'">执行完成</span>
    <span v-else>暂存</span>
  </template>
</Table>

data(){
	return {
	  //表格
      columns: [
        {
          title: "状态",
          slot: "status",  //将key改为slot
          align: "center",
        },
      ]
	}
}