vue+element-ui中的el-table-column使

2022-09-27  本文已影响0人  陶菇凉

在使用状态切换时,由于使用的表格列,有时候会有不同,使用v-if做判断,在切换时,往往没有很准确的显示和隐藏掉相关列,会导致内容错乱;
会错乱的写法:

 <el-table-column
        prop="wait_day"
        label="等待审批天数"
        v-if="status==0"
      >
        <template slot-scope="scope">
          <span>{{(scope.row.wait_day + "(天)")}}</span>
        </template>
      </el-table-column>   
      <el-table-column
        v-if="status==1"
        prop="valid_day" 
        label="有效日期"
      >
      </el-table-column>
      <el-table-column v-if="status==2"  :show-overflow-tooltip="true" label="备注" prop="audit_remark">
      </el-table-column>

正确的写法:

 <el-table-column
        prop="wait_day"
        label="等待审批天数"
        v-if="status==0"
        key="1"
      >
        <template slot-scope="scope">
          <span>{{(scope.row.wait_day + "(天)")}}</span>
        </template>
      </el-table-column>   
      <el-table-column
        v-if="status==1"
        prop="valid_day" 
        label="有效日期"
        key="2)"
      >
      </el-table-column>
      <el-table-column v-if="status==2"  key="3" :show-overflow-tooltip="true" label="备注" prop="audit_remark">
      </el-table-column>

或者这样子也是可以的

 <el-table-column
        prop="wait_day"
        label="等待审批天数"
        v-if="status==0"
        :key="Math.random()"
      >
        <template slot-scope="scope">
          <span>{{(scope.row.wait_day + "(天)")}}</span>
        </template>
      </el-table-column>   
      <el-table-column
        v-if="status==1"
        prop="valid_day" 
        label="有效日期"
        :key="Math.random()"
      >
      </el-table-column>
      <el-table-column v-if="status==2" :key="Math.random()" :show-overflow-tooltip="true" label="备注" prop="audit_remark">
      </el-table-column>
上一篇 下一篇

猜你喜欢

热点阅读