金华建设局网站,做网站行业,上海网站网络科技有限公司,威海住房和城乡建设局网站首页el-table实现表格动态新增/插入/删除 表格行#xff0c;可编辑单元格
效果如下#xff1a;
点击“新增一行”可以在表格最后新增一行#xff0c;单元格内容可编辑 点击绿色按钮#xff0c;可在指定行的后面插入一行 点击红色-按钮#xff0c;可以删除指定行 原理#…el-table实现表格动态新增/插入/删除 表格行可编辑单元格
效果如下
点击“新增一行”可以在表格最后新增一行单元格内容可编辑 点击绿色按钮可在指定行的后面插入一行 点击红色-按钮可以删除指定行 原理表格el-table是通过动态循环tableData生成只要对tableData数组进行增加删除元素就可以达到效果 这里用了element的el-table也可以用原生道理一样
templatediv classcontainerel-buttontypeprimarysizeminiiconel-icon-circle-plus-outlineclickaddRowstylemargin-bottom: 20px新增一行/el-buttonel-table :datatableData borderel-table-columnlabel序号aligncentertypeindexfixedsortable/el-table-column label列1 propcolcumn1 aligncentertemplate slot-scopescopediv classflex align-centerel-input v-modelscope.row.colcumn1 //div/template/el-table-columnel-table-column label列2 propcolcumn1 aligncentertemplate slot-scopescopediv classflex align-centerel-input v-modelscope.row.colcumn2 //div/template/el-table-columnel-table-column label操作 aligncentertemplate slot-scopescopeel-buttontypesuccessiconel-icon-pluscirclesizesmallclickaddRowIndex(scope.$index)/el-buttonel-buttontypedangericonel-icon-minuscirclesizesmallclickdelRow(scope.$index)/el-button/template/el-table-column/el-table/div
/templatescript
export default {name: test,data() {return {tableData: [],};},mounted() {},methods: {// 增加一行addRow() {const row {colcumn1: ,colcumn2: ,};this.tableData.push(row);},// 删除指定行delRow(index) {this.tableData.splice(index, 1);},// 指定位置插入行addRowIndex(index) {const row {colcumn1: ,colcumn2: ,};this.tableData.splice(index 1, 0, row);},},
};
/scriptstyle scoped
.container {padding: 50px;
}
/style
