avue-crud 组件控制某条数据所在行不显示
可以通过设置该条数据的属性来实现不显示。具体方法如下:
-
在 avue-crud 组件中找到该条数据所在的行,可以通过遍历数据列表找到。
-
给该条数据设置一个属性,例如 hidden,值为 true。
-
在 avue-crud 组件的模板中,使用 v-if 或者 v-show 指令来判断该条数据是否需要显示。
示例代码如下:
<template>
<div>
<avue-crud :list="list">
<!-- 遍历数据列表 -->
<template v-for="(item, index) in list">
<!-- 判断该条数据是否需要显示 -->
<tr v-if="!item.hidden">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
<td>{{ item.address }}</td>
</tr>
</template>
</avue-crud>
</div>
</template>
<script>
export default {
data() {
return {
// 数据列表
list: [
{ name: '张三', age: 20, gender: '男', address: '北京', hidden: false },
{ name: '李四', age: 25, gender: '女', address: '上海', hidden: true },
{ name: '王五', age: 30, gender: '男', address: '广州', hidden: false }
]
}
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/bgLF 著作权归作者所有。请勿转载和采集!