Element-UI tree form

Element-UI 2.10 as demand requires a table with a tree structure still meet our needs.

We want the tree structure format follows :( no title, radio button in front of the name of the table data can be modified)

Attach the code :( code only modify the page style, multi-select buttons and other functions to optimize their realization)

<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>select
                </ el->
            </el-input>
        </template>
    </el-table-column>
</el-table>
TableData: [{ 
    ID: . 3 , 
    DATE: ' DHS appliances ' , 
    name: ' fixed value (RMB / month) ' , 
    address: ' 100 ' , 
    Children: [{ 
        ID: 31 is , 
        DATE: ' DHS electrical sub ' , 
        name : ' fixed value (RMB / month) ' , 
        address: ' 99 ' 
    }, { 
        ID: 32 , 
        DATE: ' DHS electrical sub ' ,
        name: ' fixed value (RMB / month) ' , 
        address: ' 99 ' 
    }] 
}, { 
    ID: . 4 , 
    DATE: ' DHS appliances ' , 
    name: ' fixed value (RMB / month) ' , 
    address: ' 100 ' , 
    Children: [{ 
        ID: 31 is , 
        DATE: ' DHS electrical sub ' , 
        name: ' fixed value (RMB / month) ' , 
        address: ' 99 '
    }, { 
        ID: 32 , 
        DATE: ' DHS electrical sub ' , 
        name: ' fixed value (RMB / month) ' , 
        address: ' 99 ' 
    }] 
}],
<style>
    .el-select .el-input {
        width: 150px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>

 

Guess you like

Origin www.cnblogs.com/pcxx/p/11202034.html