Vue3+Element plus 实现表格可编辑

标签：const 05 value Element plus Vue3 id tableData row

 

<template>
    <div>       <el-button type="primary" @click="handleAdd">         新增       </el-button>       <el-button type="primary" @click="handleAdd10">         新增10个点表       </el-button>       <el-button type="primary" @click="handleClean">         清空       </el-button>     </div>     <div>         <el-table         :data="tableData"         style="width: 100%"         border         @cell-click="showUnitInput"         >           <el-table-column prop="date" label="Date">             <template #default="{ row, column }">                 <el-input                     v-if="                     tableRowEditId === row.id &&tableColumnEditIndex === column.id"                     @blur="blurValueInput(row, column)"                     @keyup.enter="blurValueInput(row, column)"                     v-model="row.date"                 />                 <span v-else>{{ row.date }}</span>             </template>           </el-table-column>           <el-table-column prop="name" label="Name">             <template #default="{ row, column }">               <el-input                   v-if="                   tableRowEditId === row.id &&tableColumnEditIndex === column.id"                   @blur="blurValueInput(row, column)"                   @keyup.enter="blurValueInput(row, column)"                   v-model="row.name"               />               <span v-else>{{ row.name }}</span>           </template>           </el-table-column>           <el-table-column prop="address" label="Address">             <template #default="{ row, column }">               <el-input                   v-if="                   tableRowEditId === row.id &&tableColumnEditIndex === column.id"                   @blur="blurValueInput(row, column)"                   @keyup.enter="blurValueInput(row, column)"                   v-model="row.address"               />               <span v-else>{{ row.address }}</span>           </template>           </el-table-column>           <el-table-column prop="value" label="Value">             <template #default="{ row, column }">               <el-input                   v-if="                   tableRowEditId === row.id                   &&tableColumnEditIndex === column.id                   "                   @blur="blurValueInput(row, column)"                   @keyup.enter="blurValueInput(row, column)"                   v-model="row.value"               />               <span v-else>{{ row.value }}</span>           </template>         </el-table-column>         <el-table-column label="Operate">             <template #default="{ row }">               <el-button type="danger" link @click="handleDelete(row)">Delete</el-button>             </template>         </el-table-column>       </el-table>     </div>   </template>     <script setup>   import { ref,reactive } from 'vue'     let tableRowEditId = ref(null) // 控制可编辑的每一行   let tableColumnEditIndex = ref(null) //控制可编辑的每一列     const showUnitInput = (row, column) => {     //赋值给定义的变量     tableRowEditId.value = row.id //确定点击的单元格在哪行 如果数据中有ID可以用ID判断，没有可以使用其他值判断，只要能确定是哪一行即可     tableColumnEditIndex.value = column.id //确定点击的单元格在哪列   }   const blurValueInput = (row, column) => {     // tableRowEditId.value = null     // tableColumnEditIndex.value = null     //在此处调接口传数据   }   const tableData = reactive([     {       id:1,       date: '2016-05-03',       name: 'Tom',       address: 'No. 189, Grove St, Los Angeles',       value: '1'     },     {       id:2,       date: '2016-05-02',       name: 'Tom',       address: 'No. 189, Grove St, Los Angeles',       value: '2'     },     {       id:3,       date: '2016-05-04',       name: 'Tom',       address: 'No. 189, Grove St, Los Angeles',       value: '3'     },     {       id:4,       date: '2016-05-01',       name: 'Tom',       address: 'No. 189, Grove St, Los Angeles',       value: '4'     }   ])     const handleDelete = (row) => {     const index = tableData.indexOf(row)     if (index !== -1) {       tableData.splice(index, 1)     }   }     const handleAdd = () => {     tableData.unshift({       id:tableData.length+1,       date: '2016-05-05',       name: 'Tom',       address: 'No. 189, Grove St, Los Angeles',       value: tableData.length+1     });       }   const handleAdd10 = () => {     let iLen = tableData.length;     for(let i=0; i < 10; i++){                 tableData.unshift({         id:iLen+i + 1,         date: '2016-05-05',         name: 'Tom',         address: 'No. 189, Grove St, Los Angeles',         value: iLen+i + 1,       });     }
      }   const handleClean = () => {     let iLen = tableData.length;     for(let i=iLen - 1; i>= 0; i--){       console.log("handleClean--->i==",i);       tableData.splice(i,1);     }       }     </script>     <style>   </style>

标签：const,05,value,Element,plus,Vue3,id,tableData,row
From： https://www.cnblogs.com/yebinghuai/p/18576644