Element-UI树形表格

Element-UI 因需求需要2.10表格中带有树形结构仍不满足我们的需求。

我们想要如下的格式的树形结构：（没有标题、多选按钮在名称的前面、表格数据可以修改）

附上代码：（代码只修改了页面样式，多选按钮等功能优化自己实现）

<el-table
        :data="tableData"
        style="width: 100%;"
        :show-header="false"
        row-key="id">
    <el-table-column
            prop="date"
            label="日期"
            sortable
            width="200">
        <template slot-scope="scope">
            <el-checkbox v-model="checked">{{scope.row.date}}</el-checkbox>
        </template>
    </el-table-column>
    <el-table-column
            prop="address"
            label="地址">
        <template slot-scope="scope">
            <el-input placeholder="请输入计费类型值" v-model="saveContractForm.amountType"
                      class="input-with-select">
                <el-select v-model="saveContractForm.amount" slot="prepend" placeholder="请选择"
                           style="width: 150px;">
                    <el-option label="固定值（元/月）" value="1"></el-option>
                    <el-option label="百分比（%）" value="2"></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>

标签：红双喜,固定值,name,Element,树形,UI,address,date,id
来源： https://www.cnblogs.com/pcxx/p/11202034.html