quasar+vue实现带分页table表格效果代码

代码语言:html

所属分类:表格

代码描述:quasar+vue实现带分页table表格效果代码

代码标签: quasar vue 分页 table 表格

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 
 
 
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quasar.prod.css">
 
 
</head>

<body>

<div id="q-app" style="min-height: 100vh;">
 
<div class="q-pa-md">
   
<q-table
     
title="Treats"
      :
rows="rows"
      :
columns="columns"
     
row-key="name"
   
></q-table>
 
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.0.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/quasar.umd.prod.js"></script>
     
<script >
const columns = [
  {
    name: 'name',
    required: true,
    label: 'Dessert (100g serving)',
    align: 'left',
    field: row => row.name,
    format: val => `${val}`,
    sortable: true
  },
  { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
  { name: 'fat', label: .........完整代码请登录后点击上方下载按钮下载查看

网友评论0