element table中怎么做行内编辑
时间: 2023-03-14 14:43:33 浏览: 65
你可以使用 element table 的 `inline-template` 属性来实现行内编辑。这需要你在 table 的每一行中使用一个 `template` 标签,然后在里面编写编辑行所需的模板内容。接下来,你可以使用 JavaScript 来控制编辑行的显示和隐藏。例如:
```
<template>
<table>
<tr v-for="item in items" :key="item.id" v-if="!item.editing">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click="item.editing = true">编辑</button>
</td>
</tr>
<template v-for="item in items" :key="item.id" v-if="item.editing">
<tr>
<td><input v-model="item.name"></td>
<td><input v-model="item.price"></td>
<td>
<button @click="item.editing = false">保存</button>
</td>
</tr>
</template>
</table>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '项目 1', price: 100 },
{ id: 2, name: '项目 2', price: 200 },
{ id: 3, name: '项目 3', price: 300 },
],
};
},
};
</script>
```
在这个例子中,我们使用了一个按钮来控制编辑行的显示和隐藏,当点击按钮时,它会修改绑定在 `item.editing` 上的值,并且会使用 `v-if` 指令来控制编辑行的显示和隐藏。这样就可以实现行内编辑的效果了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)