自定義輸入表格的行和列，讓后生成表格，請看效果：

<div><el-input v-model="initdata.rows" type="number" size="small" placeholder="請輸入行" :maxlength="2" style="width:100px" />&nbsp;<span class="margin-left">行</span>&nbsp;<el-input v-model="initdata.cols" type="number" size="small" class="margin-left" placeholder="請輸入列" :maxlength="2" style="width: 100px" />&nbsp;<span class="margin-left">列</span>&nbsp;<el-button size="small" style="margin-left:10px" @click="generateTable" type="primary">生成表格</el-button> </div> <div class="table-wapper"><table border="1" cellspacing="0" v-if="tableData.length" ref="table"><tr v-for="(arr, index) in tableData" :key="index"><td v-for="(item, index1) in arr" :key="index1"><span v-show='!item.isEdit' class="table-span" @click='clickTd(item,$event)'>{{item.name}}</span><input v-model="item.name" class="original-input" style="width:94px;height:26px" :maxlength="500" clearable v-if='item.isEdit' /></td></tr></table> </div>

在data中定義initdata.rows和initdata.cols，用來接收表格的行列數值。

generateTable(){if(this.initdata.rows>0 && this.initdata.cols>0){let rows = this.initdata.rows * 1let cols = this.initdata.cols * 1let 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 = truethis.$nextTick(() => {event.target.nextElementSibling.focus()}) }, // 使表格置為非編輯狀態 removeEdit() {this.tableData.forEach(arr => {arr.forEach(item => {item.isEdit = false})}) },

注意：點擊到編輯狀態是一定要自動獲取焦點，就是代碼中的clickTd方法，不然需要點擊兩次才能獲取到焦點。

總結

以上是生活随笔為你收集整理的vue 自定义生成表格 并且可以输入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。