Element-UI樹形表格

Element-UI 因需求需要2.10表格中帶有樹形結構仍不滿足我們的需求。

我們想要如下的格式的樹形結構：（沒有標題、多選按鈕在名稱的前面、表格數據可以修改

 

附上代碼：（代碼只修改了頁面樣式，多選按鈕等功能優化自己實現）

<el-table
        :data="devices"
        style="width: 100%;"
        :show-header="false"
        row-key="id">
    <el-table-column
            prop="name"
            label="日期"
            sortable
            width="300">
        <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" :label="scope.row.name" :key="scope.row.id" @change="handleCheckAllChange(scope.row)">{{scope.row.name}}</el-checkbox>
        </template>
    </el-table-column>
    <el-table-column
            prop="id"
            label="地址">
        <template slot-scope="scope" >
            <el-input placeholder="請輸入計費類型值" v-model="scope.row.amount"
                      class="input-with-select" v-if="scope.row.type === 2" size="small">
                <el-select v-model="scope.row.amountType" slot="prepend" placeholder="請選擇" size="small"
                           style="width: 150px;" >
                    <el-option v-for="e in amountTypes" :value="e.id" :label="e.name" :key="e.id"></el-option>
                </el-select>
            </el-input>
        </template>
    </el-table-column>
</el-table>

tableData: [{
    id: 3,
    date: '紅雙喜電器',
    name: '固定值（元/月）',
    address: '100',
    children: [{
        id: 31,
        date: '紅雙喜電器子',
        name: '固定值（元/月）',
        address: '99'
    }, {
        id: 32,
        date: '紅雙喜電器子',
        name: '固定值（元/月）',
        address: '99'
    }]
},{
    id: 4,
    date: '紅雙喜電器',
    name: '固定值（元/月）',
    address: '100',
    children: [{
        id: 31,
        date: '紅雙喜電器子',
        name: '固定值（元/月）',
        address: '99'
    }, {
        id: 32,
        date: '紅雙喜電器子',
        name: '固定值（元/月）',
        address: '99'
    }]
}],

<style>
    .el-select .el-input {
        width: 150px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>