<template> <table> <thead> <tr> <th v-for="col in gridColumns" :key="col"> {{ col }}</th> </tr> </thead> <tbody> <tr v-for="(row,index) in gridData" :key="index"> <td v-for="(value,key) in row" :key="key"> {{ value }} </td> </tr> </tbody> </table> </template> <script setup> import { ref } from 'vue'; const gridColumns = ref(['name', 'power']) const gridData = ref([ { name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Lee', power: 9000 }, { name: 'Jackie Chan', power: 7000 }, { name: 'Jet Li', power: 8000 } ]) </script> <style> table { border: 2px solid #42b983; border-radius: 3px; background-color: #fff; } th { background-color: #42b983; color: rgba(255, 255, 255, 0.66); cursor: pointer; user-select: none; } td { background-color: #f9f9f9; } th, td { min-width: 120px; padding: 10px 20px; } th.active { color: #fff; } th.active .arrow { opacity: 1; } .arrow { display: inline-block; vertical-align: middle; width: 0; height: 0; margin-left: 5px; opacity: 0.66; } .arrow.asc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #fff; } .arrow.dsc { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; } </style>
标签:VUE,name,power,solid,border,color,Grid,写法,4px From: https://www.cnblogs.com/keeplearningandsharing/p/18059476