vue 自定义生成表格 并且可以输入

自定义输入表格的行和列，让后生成表格，请看效果：

	 
	行 
	 
	列 
	生成表格


	

		

			

				{{item.name}}
		        
			
		
	

在data中定义initdata.rows和initdata.cols，用来接收表格的行列数值。

generateTable(){
	if(this.initdata.rows>0 && this.initdata.cols>0){
		let rows = this.initdata.rows * 1
		let cols = this.initdata.cols * 1
		let arr = []
		for (let i = 0; i < rows; i++) {
			arr[i] = []
			for (let j = 0; j < cols; j++) {
				arr[i][j] = {
					name: '',
					isEdit: false,
				}
			}
		}
			this.tableData = arr
	}
},
//点击表格内的单元格使单元格变成编辑状态
clickTd(item, event) {
    this.removeEdit()
	item.isEdit = true
	this.$nextTick(() => {
		event.target.nextElementSibling.focus()
	})
},
// 使表格置为非编辑状态
removeEdit() {
	this.tableData.forEach(arr => {
		arr.forEach(item => {
			item.isEdit = false
		})
	})
},

注意：点击到编辑状态是一定要自动获取焦点，就是代码中的clickTd方法，不然需要点击两次才能获取到焦点。