首页 > 其他分享 >VUE Grid的写法

VUE Grid的写法

时间:2024-03-07 18:11:53浏览次数:20  
标签:VUE name power solid border color Grid 写法 4px

<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

相关文章

  • VUE GRID WITH COMPONENT排序
    父组件:<!--Anexampleofcreatingareusablegridcomponentandusingitwithexternaldata.--><scriptsetup>importDemoGridfrom'../components/Grid.vue'import{ref}from'vue'constsearchQuery=ref('')......
  • Vue生命周期
    vue官网图示初始化阶段首先进行一些初始化操作,主要是设置一些私有属性。运行beforeCreate钩子。进入注入阶段:处理props,data,computed,watch,methods,provide等。运行created钩子。生成render函数:如果有render配置直接使用;没有的话使用编译器把模板字符串编译为render函数。运......
  • npm+vue打包静态文件+端口转发
    先说要点,再showcode1,nginx转发不要填写127.0.0.1,localhost等ip地址2,location根路径要加try_file选项,请求转发到index.html3,如果有path有/,那就都带上/ 我的nginx.conf#userroot;worker_processes1;events{worker_connections1024;}http{inclu......
  • vue项目引入自定义svg
    图标可以使用element-ui的图标库、第三方的图标库或者引入svg使用,这里是讲如何使用自定义的svg。将SVG图标放入项目 自定义的svg可以访问 https://www.iconfont.cn地址,搜索你想要的图标,下载SVG格式,放入项目的src/assets/icons/svg文件夹中。并在src/assets/icons/index.js......
  • 若依集成CIM(即时推送系统)实现将服务端修改为SpringBoot+Vue前后端分离版(文末见代码
    ​ 场景若依前后端分离版本地搭建开发环境并运行项目的教程:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 CIMGitee地址:https://gitee.com/farsunset/cimCIM项目是基于mina或者netty框架下的推送系统,我们平常使用第三方的推送SDK,如极光推送,百度......
  • Vue学习笔记38--单文件组件
    单文件组件命名规则如下所示:------单个单词命名规则:------方式一:temp.vue方式二:Temp.vue建议使用(可和vue开发者工具呼应)------多个单词命名规则------方式一:my-temp.vue方式二:MyTemp.vue建议使用(可和vue开发者工具呼应)组件交互相关的代码暴露方式:1.分别暴露:exportconst......
  • Vue+Axios的方法异步回调顺序问题
    一、问题阐述有的时候我们需要控制异步函数的执行顺序,比如a方法中如果要用到异步函数b方法的请求结果,就需要进行顺序控制,否则a函数先执行就会导致找不到数据直接报错。二、方法1.异步控制1.1.async,await等做异步控制1.2修改函数放置位置达到异步控制效果(我遇到的情况无效,但......
  • vue_居中左对齐
    div中文本居中对齐后,然后再左对齐如下效果:===============================22345645=================2345678987654============12========================================= <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8......
  • Vue调试神器vue-devtools配置 / 解决提示 Download the Vue Devtools extension for a
    访问Vue页面,控制台提示:    ......
  • vue2项目中不能直接在store中声明响应式变量,vue3项目中能在store中直接声明响应式变量
    vue2项目中不能直接在store中声明响应式变量,vue3项目中能在store中直接声明响应式变量,页面元素也会响应式生效在Vue2项目中,store中的状态默认情况下是不具备响应式的特性的。这是因为Vue2.x使用的是基于对象定义的Vue.observable()来创建响应式对象,而store中的状态是通......