做it的在哪个网站找工作,男女做羞羞完整版网站,开网站是干什么的,鸿运通网站建设怎么样一、在项目需要使用
这个需求主要是在项目中需要用到 1.点击新增按钮#xff0c;可以实现新增行。 2.在每个列里面可以进行输入。 3.可以删除新增的行#xff0c;包括数据。
二、HTML代码
1.主要是循环每一个列#xff0c;而且这些列都是动态#xff0c;根据父组件传过来…一、在项目需要使用
这个需求主要是在项目中需要用到 1.点击新增按钮可以实现新增行。 2.在每个列里面可以进行输入。 3.可以删除新增的行包括数据。
二、HTML代码
1.主要是循环每一个列而且这些列都是动态根据父组件传过来的这样可以动态的决定要多少的数据。 2.:data“tableData” 这个才是决定行的代码可以通过push的方法新增行或者减少行。
templatediv classadd-tableel-button classmb10 sizemini typeprimary clickaddTableRow新 增/el-buttonel-table :datatableData stripe highlight-current-row border refaddTableRowRefel-table-column typeindex label序号 aligncenter width50/el-table-columnel-table-column aligncenter v-for(item,index) in dataList :propitem.code :labelitem.name :keyindextemplate slot-scopescopeel-input v-modelscope.row[item.code]/el-input/template/el-table-columnel-table-column label操作 width120 aligncentertemplate slot-scopescopeel-button sizemini typedanger iconel-icon-delete clickhandleDeleteRow(scope.$index,tableData)删除/el-button/template/el-table-column/el-table/div
/template三、JavaScript代码
script
export default {name: AddTable,props: {rowTitle: {type: Array,default() {return []}},rowObj: {type: Object,default() {return {}}}},watch: {rowTitle: {handler: function(newValue) {if(newValue.length 0) {this.dataList newValue}},immediate: true}},data() {return {tableData: [],dataList: []}},methods: {addTableRow() {var addObj {};this.rowTitle.forEach(el {addObj[el.code] })this.tableData.push(addObj);// this.tableData.push(this.rowObj);setTimeout(() {this.$refs.addTableRowRef.setCurrentRow(addObj);}, 10);},handleDeleteRow(index, rows) {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {rows.splice(index, 1)this.$message({type: success,message: 删除成功!});}).catch(() {this.$message({type: info,message: 已取消删除}); });},},
}
/script四、看图片效果
