根据返回值渲染列表，在template用v-if好像不可以？

Question

想要的效果

返回数据

我的写法

<el-table-column property="particulars" label="详情" min-width="200">
      <template #default="{ row }: { row: overTimePlane }">
        <div v-for="item in row.overPlans" >
          <div>
            <span v-if="item.planType == '0'">工作日</span>
            <span v-if="item.planType == '1'">休息日</span>
            <span v-if="item.planType == '2'">节假日</span>
            :
            <span v-if="item.planTimeType == '0'">按审批时长计算</span>
            <span v-else="item.planTimeType=='1'">按打卡时间计算</span>
            <span v-else="item.planTimeType=='2'">按审批和打卡时长计算</span>
          </div>
        </div>
      </template>
    </el-table-column>

可以正常显示，但是影响到页码的事件和父组件获取表格数据

想问还有什么办法可以根据返回数据来显示对应的文字？

Answer 1

有没有可能这里写错了，是v-else-if

Answer 2

通过字典方式获取。

let planTypeMap = {
"1":"工作日",
"2":"休息日",
"3":"节假日"
}
// 获取方法
console.log(planTypeMap["1"] || "无则默认这个")

Answer 3

<el-table-column property="particulars" label="详情" min-width="200">
      <template #default="{ row }: { row: overTimePlane }">
        <div v-for="item in row.overPlans" >
          <div>
            <span>{{ ['工作日', '休息日', '节假日'][item.planType]}}</span>
:<span> {{ [ '按审批时长计算' '按打卡时间计算', '按审批和打卡时长计算'][item.planTimeType]}}</span>
          </div>
        </div>
      </template>
    </el-table-column>