美文网首页
vue+element-ui中的el-table-column使

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

作者: 陶菇凉 | 来源:发表于2022-09-27 10:34 被阅读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>
    

    相关文章

      网友评论

          本文标题:vue+element-ui中的el-table-column使

          本文链接:https://www.haomeiwen.com/subject/ykmnortx.html