vue+element-ui实现可编辑表格和表格展开收缩

发布时间 2023-04-04 22:44:56作者: 我用python写Bug

一、实现可编辑表格

HTMl代码块

<el-row>
    <el-col :span="20">
        <el-form-item label="添加入参"
                      prop="paramsArray">
            <el-button @click="addParams">新增</el-button>
            <el-table
                    v-if="paramsArray.length != 0"
                    :data="paramsArray"
            >
                <el-table-column type="index" label="序号"
                                 width="100"></el-table-column>
                <el-table-column prop="key"
                                 label="参数名称"
                                 width="150">
                    <template slot-scope="scope">
                        <el-input
                                v-model="scope.row.key"
                                autocomplete="off"
                                size="small"
                                placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="value"
                                 label="参数值"
                                 width="150">
                    <template slot-scope="scope">
                        <el-input
                                v-model="scope.row.value"
                                autocomplete="off"
                                size="small"
                                placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                   type="danger"
                                   plain
                                   @click="delParams(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
    </el-col>
</el-row>

 

部分JS

data() {
    return {
            paramsArray: [
                {
                    index: 0,
                    key: "aa",
                    value: 10
                },
                {
                    index: 1,
                    key: "bb",
                    value: 15
                }
            ]
    }
},
methods: {
    delParams(index, row) {
        console.log("index: " + index)
        console.log("row: " + JSON.stringify(row));
        this.paramsArray.splice(index, 1);
    },
    addParams() {
        let length = this.paramsArray.length;
        this.paramsArray.push(
        {
            index: length,
            key: "",
            value: ""
        })
    }
}

 

二、表格展开和收缩

HTMl代码块

<div>
    <p style="cursor: pointer">
        <span @click="toggleExpandTable">
            <span :class="{'el-icon-arrow-down': tableExpand.down, 'el-icon-arrow-right': !tableExpand.down}">
            </span>
            <span>表格收缩</span>
        </span>
    </p>
    <el-table
            v-if="tableExpand.refreshTable"
            :default-expand-all="tableExpand.expand"
            id="test-table"
            :data="tableData"
            border
            style="width: 1580px;margin-left: 1px;border-radius: 3px;">
        <el-table-column align="left"
                         prop="name"
                         label="名称" fit>
        </el-table-column>
        <el-table-column align="left"
                         prop="age"
                         label="年龄" fit>
        </el-table-column>
    </el-table>
</div>

 

部分JS

data() {
    return {
        tableData: [
            {
                "name": "aaa",
                "age": 17
            },
            {
                "name": "bbb",
                "age": 18
            }
        ]
        tableExpand: {
            refreshTable: true,
            expand: true,
            down: true
        }
    }
},
methods: {
    toggleExpandTable() {
        this.tableExpand.refreshTable = !this.tableExpand.refreshTable;
        this.tableExpand.expand = !this.tableExpand.expand;
        this.tableExpand.down = !this.tableExpand.down;
    }
}