<el-button class="buttonInfo" size="small" @click="updataMethod(scope.$index,scope.row)">编辑</el-button>updataMethod(index, rowData) { this.dialogEdittVisible = true this.$nextTick(() => { this.dialogType = 'editProjectOne' this.formEditTitle = '编辑' this.formEdit = Object.assign({}, rowData) this.getMbsj() }) }, getTarget() { if (this.formList.indexName == null || this.formList.indexName == '') { this.$message('请选择分项') return false } if (this.itemize == null || this.itemize == '') { this.$message('请选择总量') return false } this.$ajax({ url: '/lims/projectLib/project_item', method: 'post', data: { name: this.formList.indexName, tableData: this.selectedData, }, }).then(res => { if (res.data.code === 200) { this.$message({ message: '添加成功', center: true, type: 'success', }) this.dialogEdittVisible = false this.getList() } else { this.$message({ message: res.data.msg, center: true, type: 'error', }) this.dialogEdittVisible = false } }) },点击编辑按钮时如何显示编辑之前的数据
时间: 2023-07-15 19:14:41 浏览: 55
根据你提供的代码,可以看出编辑按钮点击后会触发 `updataMethod` 方法,该方法会将 `dialogEdittVisible` 设置为 `true`,从而显示编辑弹窗。同时,会将 `formEdit` 对象赋值为当前行数据的拷贝,用于编辑之前的数据展示。
你可以在弹窗中使用 `formEdit` 对象的属性来展示编辑之前的数据。例如,在弹窗中展示名称可以这样写:
```html
<el-form-item label="名称">
<el-input v-model="formEdit.name"></el-input>
</el-form-item>
```
这里假设当前行数据对象中有一个名为 `name` 的属性。你可以根据实际情况调整代码。
相关问题
<el-button class="buttonInfo" size="small" @click="updataMethod(scope.$index,scope.row)">编辑</el-button>updataMethod(index, rowData) { this.dialogEdittVisible = true this.$nextTick(() => { this.dialogType = 'editProjectOne' this.formEditTitle = '编辑' this.formEdit = Object.assign({}, rowData) this.getMbsj() }) },点击按钮怎么回显数据
根据你提供的代码片段,可以看出点击`编辑`按钮后会调用`updataMethod`方法,并将当前行的数据作为参数传递进去。在`updataMethod`方法中,会将`dialogEdittVisible`属性设置为`true`,显示一个弹窗。
在弹窗中,会根据`dialogType`属性的值来判断是编辑还是新增操作。如果是编辑操作,那么会将`formEditTitle`属性设置为`编辑`。然后通过`Object.assign()`方法,将当前行的数据赋值到`formEdit`对象中,以便在弹窗中渲染出当前行的数据。最后会调用`getMbsj`方法,获取一些必要的数据。
因此,在弹窗中显示当前行数据的代码应该是在`<template>`标签中,使用`v-model`指令绑定表单元素的值,如下所示:
```html
<template>
<el-dialog :visible.sync="dialogEdittVisible">
<el-form :model="formEdit">
<el-form-item label="标题">
<el-input v-model="formEdit.title"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input v-model="formEdit.content"></el-input>
</el-form-item>
<!-- 其它表单元素 -->
</el-form>
</el-dialog>
</template>
```
这样,打开弹窗后,表单中的`标题`和`内容`输入框中就会显示当前行的数据。当用户修改数据后,点击保存按钮即可将修改后的数据提交到后端。
将以下vue+element ui代码转换成纯html+element ui代码:<template> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane label="User" name="first"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="Config" name="second"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table></el-tab-pane> <el-tab-pane label="Role" name="third"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table></el-tab-pane> <el-tab-pane label="Task" name="fourth"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table></el-tab-pane> </el-tabs> </template> <script lang="ts" setup> import { computed, ref } from 'vue' interface User { date: string name: string address: string } const search = ref('') const filterTableData = computed(() => tableData.filter( (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()) ) ) const handleEdit = (index: number, row: User) => { console.log(index, row) } const handleDelete = (index: number, row: User) => { console.log(index, row) } const tableData: User[] = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Morgan', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Jessy', address: 'No. 189, Grove St, Los Angeles', }, ] </script> <style> .demo-tabs > .el-tabs__content { padding: 32px; color: #6b778c; font-size: 32px; font-weight: 600; } </style>
以下是转换后的纯HTML+Element UI代码:
```html
<div class="demo-tabs el-tabs">
<div class="el-tabs__header">
<div class="el-tabs__nav-wrap">
<div role="tab" aria-controls="pane-first" :aria-selected="activeName==='first' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='first' }" @click="activeName='first'">User</div>
<div role="tab" aria-controls="pane-second" :aria-selected="activeName==='second' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='second' }" @click="activeName='second'">Config</div>
<div role="tab" aria-controls="pane-third" :aria-selected="activeName==='third' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='third' }" @click="activeName='third'">Role</div>
<div role="tab" aria-controls="pane-fourth" :aria-selected="activeName==='fourth' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='fourth' }" @click="activeName='fourth'">Task</div>
</div>
</div>
<div class="el-tabs__content">
<div role="tabpanel" aria-hidden="false" id="pane-first" class="el-tab-pane" :class="{ 'is-active': activeName==='first' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_1_column_1">Date</th>
<th class="el-table_1_column_2">Name</th>
<th class="el-table_1_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_1_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" aria-hidden="true" id="pane-second" class="el-tab-pane" :class="{ 'is-active': activeName==='second' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_2_column_1">Date</th>
<th class="el-table_2_column_2">Name</th>
<th class="el-table_2_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_2_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" aria-hidden="true" id="pane-third" class="el-tab-pane" :class="{ 'is-active': activeName==='third' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_3_column_1">Date</th>
<th class="el-table_3_column_2">Name</th>
<th class="el-table_3_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_3_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" aria-hidden="true" id="pane-fourth" class="el-tab-pane" :class="{ 'is-active': activeName==='fourth' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_4_column_1">Date</th>
<th class="el-table_4_column_2">Name</th>
<th class="el-table_4_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_4_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
```
需要注意的是,Element UI的CSS样式需要在HTML文件中引入。此外,上述代码中的`activeName`、`search`、`filterTableData`、`handleEdit`和`handleDelete`需要在JavaScript中定义和实现。