企业建站公司哪里有,做搜狗手机网站优化点,微商城网站制作,域名到期了网站备案还有效吗一、在项目需要使用
这个需求主要是在项目中需要用到 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四、看图片效果
