Vue Element的坑 checked框跑到最後面了

1.<el-table>里面用uid的checked多選功能,選中框應該在最前面的

配置 uid設置在第一個位置

export default [{
    name: "uid",
    type:"checked",
    cname: i18n.t(path + 'uid'),
    width:"40"
  },

效果本應該是這樣的

結果選擇框跑到最後了

標籤涉及到 v-for和v-if 使用了div標籤導致出現以上問題

可以採用 template或者不管Vue的的建議直接將v-for和v-if放在統一標籤都可以

<el-table class="errperson" :height="height" border ref="chkTable1" :data="tableData0" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> 
   // 由於 v-for和v-if Vue建議不要在同一標籤里,所以單獨設置了div ---此div導致uid的checked跑到後面去了  
  <div v-for="(columnRow, columnIndex) in chkper.chkper2" :key="'tb2'+columnIndex"  >
       <el-table-column 
           sortable  
           v-if="!columnRow.hasOwnProperty('visible') || columnRow.visible"
           :show-overflow-tooltip="!columnRow.hasOwnProperty('showtips') || columnRow.showtips"                           
           :align="toLowerCase(columnRow.type) === 'number' ? 'right' : 'left' "
           :type="toLowerCase(columnRow.type) === 'checked'?'selection':''"
           :prop="columnRow.name"
           :label="columnRow.cname" 
           :width="columnIndex == chkper.chkper2.length ? 'auto' : (columnRow.width ? columnRow.width : 150) "
           :min-width="columnRow.minWidth ? columnRow.minWidth : 90">
       </el-table-column>
   </div>                                          
</el-table>

改成 template 標籤或者直接嵌套統一標籤時,顯示正常
<el-table class="errperson" :height="height" border ref="chkTable1" :data="tableData0" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">  
   // 採用template標籤不能設置:key
  <template v-for="(columnRow, columnIndex) in chkper.chkper2">
       <el-table-column 
           sortable     
           :key="'tb2'+columnIndex"     //  template標籤時設置              
           v-if="!columnRow.hasOwnProperty('visible') || columnRow.visible"
           :show-overflow-tooltip="!columnRow.hasOwnProperty('showtips') || columnRow.showtips"                           
           :align="toLowerCase(columnRow.type) === 'number' ? 'right' : 'left' "
           :type="toLowerCase(columnRow.type) === 'checked'?'selection':''"
           :prop="columnRow.name"
           :label="columnRow.cname" 
           :width="columnIndex == chkper.chkper2.length ? 'auto' : (columnRow.width ? columnRow.width : 150) "
           :min-width="columnRow.minWidth ? columnRow.minWidth : 90">
       </el-table-column>
   </template>                                          
</el-table>

Vue Element的坑 checked框跑到最後面了

猜你喜欢