element-ui Table表格的配置和table+collapse 完成折叠表格

1. 设置表格-表头的背景色

2.  <el-table :header-cell-style="{ backgroundColor: '#f8f8f8',color:'#333'}">

3. ---

   问题：表格自适应网页的宽度，给每列设置宽度width=150px不生效

4. 解决方法：使用min-width:"20%"

   <el-table-column  min-width="20%">

   ---

   5、想要实现两级折叠，表格内嵌二级表格，使用elemnt-ui的table 和 collapse，

 最终页面和代码如下：

<template>
    <el-table 
        border
        :data="dataTree" 
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#f8f8f8',color:'#333'}">
        <el-table-column type='expand' min-width="20%">
        <template slot-scope='scope'>
            <el-main style='padding: 0 0;width: 100%;'>
            <el-collapse v-model='activeName'>
                <el-collapse-item name='1'> 
                <el-main style='padding: 0 80px'> 
                    <el-table :data='scope.row.app' border  :header-cell-style="{ backgroundColor: '#f8f8f8',color:'#333'}">
                    <el-table-column 
                        prop="text_z"
                        label="数据结构"
                        min-width="20%">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.text_z"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column 
                        prop="text_x"
                        label="C语言"
                        min-width="20%">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.text_x"></el-input>
                        </template>
                    </el-table-column>
                    </el-table>
                </el-main>
                </el-collapse-item> 
            </el-collapse>
            </el-main>
        </template>
        </el-table-column> 
        <el-table-column 
        prop="shuxue_one"
        label="数1"
        min-width="20%">
        <template slot-scope="scope">
            <el-input v-model="scope.row.shuxue_one"></el-input>
        </template>
        </el-table-column>
        <el-table-column 
        prop="shuxue_two"
        label="数2"
        min-width="20%">
        <template slot-scope="scope">
            <el-input v-model="scope.row.shuxue_two"></el-input>
        </template>
        </el-table-column>
        <el-table-column
        prop="en_one"
        label="英1"
        min-width="20%">
        <template slot-scope="scope">
            <el-input v-model="scope.row.en_one"></el-input>
        </template>
        </el-table-column>
        <el-table-column
        prop="en_two"
        label="英2"
        min-width="20%">
        <template slot-scope="scope">
            <el-input v-model="scope.row.en_two"></el-input>
        </template>
        </el-table-column> 
        <el-table-column
        prop="com_one"
        label="计网"
        min-width="20%">
        <template slot-scope="scope">
            <el-input v-model="scope.row.com_one"></el-input>
        </template>
        </el-table-column>
        <el-table-column
        prop="com_two"
        label="计应"
        min-width="20%">
        <template slot-scope="scope">
            <el-input v-model="scope.row.com_two"></el-input>
        </template>
        </el-table-column>  
    </el-table> 
</template>

<script>
import {getdataAPI, putCodeApi} from '@/api/api'
export default {
    data(){
       return{
            dataTree:[],
            form:{
                qq_q:'',
                ww_w:'',
            },
       }
    },
    methods:{
        async getData(){
            await getdataAPI(this.id).then(res =>{
                let data1 = res ? res.data : [];
                this.dataTree = data1.server;
                this.form = data1;
                this.qq_q =  this.form.qq_q;
                this.ww_w =  this.form.ww_w; 
            })
        },
        async updateSetting(){   
            try {
                let data = await putCodeApi(this.id,this.form); 
                // 修改了最新的值，调接口，去更新修改后的值 
                this.form = data.data 
                this.$confirm('更新成功', '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                    });
            } catch (error) {
                if (error.response && error.response.status === 405) {
                this.$message.error(error.response.data);
                } else {
                throw error;
                }
            }
        },
    }
}
</script>

<style>

</style>