vue3 +element+ts表格按钮切换
时间: 2023-07-02 19:22:26 浏览: 96
同样地,我们可以利用Vue3的响应式数据和Element的表格组件来实现表格中按钮的切换效果。以下是一个简单的示例:
```typescript
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<el-button :type="row.status ? 'primary' : 'danger'" @click="toggleStatus(row)">
{{ row.status ? '开' : '关' }}
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const tableData = ref([
{ name: '张三', age: 20, status: false },
{ name: '李四', age: 25, status: true },
{ name: '王五', age: 30, status: false },
]);
const toggleStatus = (row: any) => {
row.status = !row.status; // 切换状态
};
return {
tableData,
toggleStatus,
};
},
});
</script>
```
在这个示例中,我们在表格中添加了一个列来显示按钮,并利用了`template`标签来自定义按钮的样式和事件。按钮的颜色和文字仍然根据状态来动态显示,状态的切换也是通过点击按钮来实现的。
希望这个例子能够对你有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)