天给小伙伴们分享一款功能超强大的Vue表格组件VxeTable。

vxe-table 基于vue2.x构建的高效table表格组件，star高达2.5K+。支持行/列拖拽、排序筛选、虚拟滚动、懒加载、树形结构、xlsx导入导出、集成第三方库等功能。

功能特性

• 模块化表格、按需引入，减少项目大小；
• 虚拟滚动、懒加载，渲染性能大幅提升；
• 多种主题，多图标；
• 多种表格类型（基础表格、复杂表格、树形表格、编辑表格、高级表格、大数据表格）；
• 扩展插件库；

安装

$ npm i xe-utils vxe-table -S

引入组件

import Vue from 'vue';
import 'xe-utils';
import VxeTable from 'vxe-table';
import 'vxe-table/lib/index.css';

Vue.use(VxeTable);

// 给vue挂载全局窗口实例
Vue.prototype.$modal=VxeTable.modal;

快速使用

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="sex" title="性别"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        { id: 20001, name: 'Field1', role: 'Develop', sex: 'Man', address: 'Beijing' },
        { id: 20002, name: 'Field2', role: 'Test', sex: 'Woman', address: 'Guangzhou' },
        { id: 20003, name: 'Field3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

官网文档提供了详细的演示及API操作。

so good，非常实用的一款多功能表格解决方案，如果想要了解更多功能，可以自行去查阅文档。

最后附上文档及项目地址。

# 文档地址
https://xuliangzhan_admin.gitee.io/vxe-table/

# 仓库地址
https://github.com/x-extends/vxe-table

ok，就分享到这里。希望对大家有所帮助，欢迎一起交流分享技术知识！

天为大家带来了HTML中的表格与列表、块及类与ID的基础知识，首先为大家介绍的是HTML中的表格与列表。

一、HTML中的表格与列表：

相信大家都知道在office、Excel等办公软件中如何制作表格，那大家知道如何在网页上制作表格呢？同时网页上面的注册和登陆表又是怎么制作出来的呢？今天将会为大家详细讲解。

1、表格：

①　了解<table>标签

在网页上的表格制作是用<table>标签来定义的。

②　table中的<tr>和<td>标签

l 每个表格有若干行，即用<tr>标签来定义。

l 每行被分割为若干单元格，即用<td>标签来定义。

运行结果：

③　在<table>元素中添加border属性就可以显示边框，示例：

运行结果：

④　表单的表格用<th>标签表示，示例：

运行结果：

2、列表

列表分为无序列表、有序列表和定义列表

①　无序列表

l 无序列表是一个项目的列表，此列表项目使用粗体圆点进行标记。

l 无序列表始于<ul>标签，每个列表始于<li>，示例：

运行结果：

l 在<ul>标签中使用type属性可以改变列表前面的符号，示例：

运行结果：

②　有序列表

l 与无序列表不同的是，有序列表使用的是<ol>标签，示例：

运行结果：

在<ol>标签中添加type属性，可以改变列表前面的符号，示例：

运行结果：

③　定义列表

l 定义列表就是自定义列表，是项目及其注释的组合。

l 自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始，示例：

运行结果：

二、HTML中的块：

1、大多数HTML元素被定义为块级元素或内联元素

①　块级元素在浏览器显示时，通常以新行来开始（和结束），例如：<h1>、<p>、<ul>、<table>等。

②　内联元素在显示时通常不会以新行开始，例如：<b>、<td>、<a>、<img>等。

2、HTML中的<div>元素

HTML<div>元素是块级元素，是可以组合其他HTML元素的容器，简单来说<div>元素一般被用在HTML布局上面，示例：

运行结果：

3、HTML中的<span>元素

HTML<span>元素是内联元素可用作文本的容器，当与css一同使用时，<span>元素可用于为部分文本设置样式属性，示例：

运行结果：

三、HTML中的CLASS和ID:

在上面的示例中我们有看到id标签，在学习过程中很多人搞不懂class类和id标签的区别，现在开始教大家如何区分class类和id标签。

CLASS:

1、Class就我们口中所说的类

2、在css中引用时以“.”开头，并且可以被多个元素调用，例如：

3、在使用中，可以先设置出一个样式，然后被多个元素引用。

ID:

1、id是一种标签

2、在css中引用时以“#”开头，只能定义一个元素，例如：

3、在使用时，只能先确定一个元素，然后才能设置其样式，无法被其它元素引用，是唯一的标签。

希望大家能够从这篇文章学习到HTML的部分知识~