vue3 组件共用样式的写法和应用--table样式

这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。




<template>
  <table class="data-table">
    <!-- table 的内容 -->
  </table>
</template>
 
<script setup lang="ts">
// 脚本部分保持不变
</script>
 
<style scoped>
.data-table {
  width: 100%;
  border-collapse: collapse;
  /* 其他样式 */
}
 
.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 8px;
  /* 其他样式 */
}
 
/* 其他相关样式 */
</style>

这个例子展示了如何在Vue 3组件中使用<style scoped>标签来定义组件专有的CSS样式。scoped属性确保了样式只应用于当前组件的元素，避免了样式污染其他组件的可能。这是一个良好的实践，尤其是在大型应用中。

vue3 组件共用样式的写法和应用--table样式

评论已关闭

推荐阅读