鍍金池/ 問(wèn)答/iOS  HTML/ element ui table中,某些行需要展開(kāi),某些行不需要展開(kāi)

element ui table中,某些行需要展開(kāi),某些行不需要展開(kāi)

element ui table中,可否做到根據(jù)行數(shù)據(jù)信息來(lái)設(shè)置當(dāng)前行是否有展開(kāi)功能?

<el-table-column type="expand"></el-table-column>

看源碼覺(jué)得這個(gè)屬性不可控,求高人相助

回答
編輯回答
尛憇藌

clipboard.png

clipboard.png

最終要實(shí)現(xiàn)的目的是這種的,現(xiàn)在實(shí)現(xiàn)的方式是從css上解決:
html

<el-table :data="tableData5" style="width: 100%" :row-class-name="setClassName">
    <el-table-column type="expand">...</el-table-column>
</el-table>

js

data() {
  return {
    tableData5: [{
      id: '12987122',
      name: '好滋好味雞蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
      address: '上海市普陀區(qū)真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: true
    }, {
      id: '12987123',
      name: '好滋好味雞蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
      address: '上海市普陀區(qū)真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: false
    }, {
      id: '12987125',
      name: '好滋好味雞蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
      address: '上海市普陀區(qū)真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: true
    }, {
      id: '12987126',
      name: '好滋好味雞蛋仔',
      category: '江浙小吃、小吃零食',
      desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
      address: '上海市普陀區(qū)真北路',
      shop: '王小虎夫妻店',
      shopId: '10333',
      expand: false
    }]
  }
},
methods:{
    setClassName({row, index}){
        // 通過(guò)自己的邏輯返回一個(gè)class或者空
        return row.expand ? 'expand' : '';
    },
},

css

.expand .el-table__expand-column .cell {
    display: none;
}
2017年5月24日 07:08
編輯回答
蟲(chóng)児飛

ele沒(méi)有提供單獨(dú)行展開(kāi)的做法,控制不了<el-table-column type="expand"></el-table-column>的條件,而且就算上樓所說(shuō)的將template標(biāo)簽添加是否顯示,但是展開(kāi)符號(hào)仍然還有,用戶仍然認(rèn)為是可選的,體驗(yàn)不好。
建議在表格數(shù)據(jù)渲染的時(shí)候?qū)⑿枰[藏的展開(kāi)符號(hào)行的index值保存,表格數(shù)據(jù)渲染到頁(yè)面之后根據(jù)所保留的index值數(shù)組將所在行的圖標(biāo)標(biāo)簽<i class="el-icon el-icon-arrow-right"></i>隱藏(刪除也可以,但是此時(shí)index值會(huì)有修改,需要注意下)

2018年4月30日 20:42
編輯回答
凹凸曼

你用v-if控制<el-table-column type="expand"></el-table-column>這個(gè)不就完了

2017年1月6日 23:12
編輯回答
魚(yú)梓

加了<el-table-column type="expand"></el-table-column>就會(huì)出現(xiàn)一列點(diǎn)選展開(kāi)的向右箭頭。

element-ui現(xiàn)在的table不能滿足你根據(jù)行數(shù)據(jù)信息來(lái)設(shè)置當(dāng)前行是否有展開(kāi)功能的需求。

但你可以設(shè)置 v-if="props.row.canExpand" 來(lái)控制展開(kāi)內(nèi)容是否為空

<template slot-scope="props" v-if="props.row.canExpand">
        
</template>
2017年1月18日 18:53
編輯回答
喵小咪

沒(méi)看懂:row-class-name="setClassName"這個(gè)跟type有關(guān)系嗎

2018年3月1日 14:31