用vue写表格相同条件的数据是同一个背景
时间: 2023-10-15 10:02:36 浏览: 36
您可以使用`computed`计算属性和`v-bind`指令来实现表格中相同条件的数据使用同一个背景颜色。
首先,在Vue组件的`data`中添加一个`backgroundColors`对象,用来存储相同条件的背景颜色:
```
data() {
return {
data: [], // 表格数据
condition: '', // 条件
backgroundColors: {} // 相同条件的背景颜色
}
}
```
接着,定义一个`computed`计算属性`background`,用来返回每一行数据对应的背景颜色:
```
computed: {
background() {
return this.data.map((item, index) => {
const key = item[this.condition]; // 获取当前行数据对应的条件值
if (!this.backgroundColors[key]) { // 如果没有存储该条件的背景颜色,则生成一个随机颜色
this.backgroundColors[key] = '#' + Math.floor(Math.random() * 16777215).toString(16);
}
return { backgroundColor: this.backgroundColors[key] }; // 返回当前行数据对应的背景颜色
});
}
}
```
最后,在表格中使用`v-bind`指令将计算属性中返回的背景颜色应用到每一行数据上:
```
<table>
<tr v-for="(item, index) in data" :style="background[index]">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</table>
```
这样,相同条件的数据就会使用同一个背景颜色了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![vue](https://img-home.csdnimg.cn/images/20210720083646.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)