vue+element-ui实现可编辑表格和表格展开收缩
一、实现可编辑表格
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; } }