el-descriptions 设置 column=2 报错 Invalid prop: type check failed for prop "column". Expected Number with value 2, got String with value "2".

根据提供的引用内容，el-descriptions 设置 column=2 报错 Invalid prop: type check failed for prop "column". Expected Number with value 2, got String with value "2" 的原因是传入的 column 属性的类型不正确。期望的类型是数字，但实际传入的是字符串。

解决这个问题的方法是将 column 属性的值改为数字类型。可以使用 parseInt() 函数将字符串转换为数字。以下是一个示例代码：

<el-descriptions :column="parseInt('2')"></el-descriptions>

这样就可以将字符串 "2" 转换为数字 2，解决了类型不匹配的问题。

相关问题

让下面这段代码的操作按钮再每个<<el-descriptions>右边中间合适的位置显示<div v-for="apiData in apiList " style="overflow-y: auto"> <el-descriptions :title="apiData.apiName" style="border-top: 1px solid #ccc; color: #4f9bff; border-bottom: 1px solid rgba(204,204,204,0);"> <el-descriptions-item label="api类型"> <dict-tag :options="belongOptions" :value="apiData.apiType"/> </el-descriptions-item> <el-descriptions-item label="url的后缀"> {{ apiData.apiExposeurl }} </el-descriptions-item> <el-descriptions-item label="校验appkey"> <dict-tag :options="appkeyOptions" :value="apiData.ischeck"/> <!-- <dict-tag :options="appkeyOptions" :value="apiData.ischeck" />--> </el-descriptions-item> <el-descriptions-item label="请求方式"> {{ apiData.requestMethod }} </el-descriptions-item> <el-descriptions-item label="来源表"> {{ apiData.apiTable }} </el-descriptions-item> <!-- <el-descriptions-item style="float: right;margin-left: 227px;--> <!-- margin-top: -38px;">--> <!-- <el-button--> <!-- size="mini"--> <!-- type="success"--> <!-- icon="el-icon-s-promotion"--> <!-- style="margin-left: 118px;"--> <!-- @click="handleUpdate(apiData)"--> <!-- >申请--> <!-- </el-button>--> <!-- </el-descriptions-item>--> <template slot="extra"> <el-button type="primary" size="small">操作</el-button> </template> </el-descriptions> </div>

您可以在每个`<el-descriptions>`标签内添加一个`<template>`标签，然后在这个`<template>`标签内添加一个`<el-button>`标签来实现操作按钮的显示。具体实现方式如下所示：

<div v-for="apiData in apiList" style="overflow-y: auto">
  <el-descriptions :title="apiData.apiName"
                   style="border-top: 1px solid #ccc; color: #4f9bff; border-bottom: 1px solid rgba(204,204,204,0);">
    <el-descriptions-item label="api类型">
      <dict-tag :options="belongOptions" :value="apiData.apiType"/>
    </el-descriptions-item>
    <el-descriptions-item label="url的后缀">
      {{ apiData.apiExposeurl }}
    </el-descriptions-item>
    <el-descriptions-item label="校验appkey">
      <dict-tag :options="appkeyOptions" :value="apiData.ischeck"/>
    </el-descriptions-item>
    <el-descriptions-item label="请求方式">
      {{ apiData.requestMethod }}
    </el-descriptions-item>
    <el-descriptions-item label="来源表">
      {{ apiData.apiTable }}
    </el-descriptions-item>
    <template slot="extra">
      <el-button type="primary" size="small">操作</el-button>
    </template>
  </el-descriptions>
</div>

这样就可以在每个`<el-descriptions>`标签的右侧中间位置显示一个操作按钮了。您可以根据需要对按钮的样式进行调整。

<el-col :span="6" :xs="24"> <div class="card-list" style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-between; align-items: center;"> <!--div style="display: flex; justify-content: space-between; align-items: center;"--> <!--el-card style="margin-bottom:20px; width:300px;height:280px"--> <el-card style="width:300px;height:280px; margin-left:1px;margin-bottom: 10px"> <template #header> <div class="h-4 pl-[90px]" style="width: 100%;display: flex;justify-content: space-between; align-items: center;"> <div class="user-block" style="line-height: 30px;font-size: 20px;"> <span class="username text-muted" style="margin-left: 10px;">故障模拟设备</span> <span class="description" style="margin-left: 10px;">教学理论设备</span> </div> <el-tag class="username text-muted" style="margin-left: 10px;color:green">运行</el-tag> <div class="el-icon-setting" style="font-size: 25px; color: rgba(18, 21, 211, 0.829);" @click="update"></div> </div> </template> <div class="flex justify-center" style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-between; align-items: center;"> <img class="rightullidiv" :src="'../../../static/images/fan.gif'"> <!--img class="w-[100px] h-[100px] rounded-lg" src="'../../../static/images/fan.gif'" alt=""--> <div class="ml-3" style="width:120px;height:280px; margin-left:1px;margin-bottom: 10px"> <!--el-descriptions class="el-descriptions__body" size="small" :column="Number('1')" border--> <el-descriptions size="small" :column="Number('1')" border> <el-descriptions-item label="电压">380 V</el-descriptions-item> <el-descriptions-item label="电流">10 A</el-descriptions-item> <el-descriptions-item label="通讯">正常 </el-descriptions-item> </el-descriptions> </div> </div> </el-card> </div> </el-col>实现图片与el-descriptions-item label="电压"并排放置，如何修改代码

您可以将图片与el-descriptions-item label="电压"都放在一个div中，设置该div的display属性为flex，并设置justify-content为space-between或者space-around。具体代码如下：

<div class="flex justify-between">
    <img class="rightullidiv" :src="'../../../static/images/fan.gif'">
    <el-descriptions size="small" :column="Number('1')" border>
        <el-descriptions-item label="电压">380 V</el-descriptions-item>
    </el-descriptions>
</div>

您可以将以上代码替换掉原来的el-descriptions代码部分即可。