在BootstrapTable中应用自定义格式和样式
发布时间: 2024-02-17 15:30:38 阅读量: 54 订阅数: 18 
# 1. 简介
## 1.1 BootstrapTable概述
BootstrapTable是一个强大的jQuery表格插件，可以轻松地在网页中创建响应式和具有各种功能的表格。它支持分页、排序、搜索以及自定义格式和样式等功能，使得展示和处理大量数据变得更加简单和灵活。
## 1.2 自定义格式和样式的重要性
在实际开发中，数据的表现形式和样式往往需要根据项目需求进行定制。BootstrapTable提供了丰富的方法来自定义表格的格式和样式，使得开发者可以根据具体需求灵活地展示数据，提升用户体验和数据可视化效果。
接下来，我们将详细介绍如何使用BootstrapTable应用自定义格式和样式。
# 2. 开始使用BootstrapTable
BootstrapTable是一个强大的开源JavaScript表格插件，用于在网页上展示数据并提供丰富的功能和样式。在本章节中，我们将介绍如何开始使用BootstrapTable来创建一个基本的数据表格，并添加数据和列。
### 安装BootstrapTable
首先，我们需要引入BootstrapTable的相关文件。你可以选择使用CDN链接或通过npm、yarn等包管理工具安装。以下是通过CDN链接引入的示例代码：
```html
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入BootstrapTable CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.18.3/bootstrap-table.min.css">
<!-- 引入jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入BootstrapTable JavaScript -->
<script src="https://cdn.staticfile.org/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
```
### 创建基本的BootstrapTable
接下来，我们将展示如何创建一个基本的BootstrapTable。在HTML文件中添加以下代码：
```html
<table id="table"></table>
```
然后，在JavaScript中初始化BootstrapTable：
```javascript
$('#table').bootstrapTable();
```
### 添加数据和列
要向BootstrapTable中添加数据和定义列，可以通过JavaScript代码来实现。下面是一个简单的示例：
```javascript
var data = [
{id: 1, name: 'Alice', age: 25},
{id: 2, name: 'Bob', age: 30},
{id: 3, name: 'Charlie', age: 28}
];
$('#table').bootstrapTable({
columns: [
{field: 'id', title: 'ID'},
{field: 'name', title: 'Name'},
{field: 'age', title: 'Age'}
],
data: data
});
```
通过以上步骤，你已经成功创建了一个基本的BootstrapTable，并向其中添加了数据和定义了列。接下来，我们将继续探讨如何自定义表格的格式和样式。
# 3. 自定义表格格式
在BootstrapTable中，我们可以使用各种方法来自定义表格的格式，以使数据更易于理解和展示。下面将介绍一些常见的自定义表格格式的方法。
#### 3.1 使用BootstrapTable的格式化器
BootstrapTable提供了格式化器的功能，可以对特定列的数据进行格式化，例如将数字格式化为货币，日期格式化为特定的样式等。以下是一个示例代码，演示如何使用格式化器来自定义表格中的数据：
```javascript
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
},{
field: 'name',
title: 'Name'
},{
field: 'price',
title: 'Price',
formatter: function (value, row, index) {
return '$' + value.toFixed(2);
}
}]
});
```
在上面的代码中，我们使用了一个格式化器来将`price`列的数值格式化为货币格式。可以根据实际需求编写自定义的格式化器函数，以展示不同格式的数据。
#### 3.2 自定义日期格式
有时候，我们需要将日期格式化为特定的格式，以便更清晰地显示。BootstrapTable提供了`yyyy-MM-dd`、`yyyy-MM-dd HH:mm:ss`等常见格式的日期格式化方法。下面是一个示例代码：
```javascript
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
},{
field: 'name',
title: 'Name'
},{
field: 'date',
title: 'Date',
formatter: function (value, row, index) {
return new Date(value).toLocaleDateString();
}
}]
});
```
在上面的示例中，我们将`date`列的日期数据格式化为本地日期格式，以便更好地展示在表格中。
#### 3.3 嵌套表格
有时候，我们需要在BootstrapTable中展示复杂的数据结构，这时可以使用嵌套表格来呈现。嵌套表格可以让用户在查看主要数据的同时，展开查看更详细的子数据。以下是一个示例代码，展示如何创建嵌套表格：
```javascript
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
},{
field: 'name',
title: 'Name'
},{
field: 'details',
title: 'Details',
formatter: function (value, row, index) {
var html = '';
html += '<table>';
// 添加子表格的数据
html += '</table>';
return html;
}
}]
});
```
在上面的示例中，我们通过自定义的格式化器函数来创建一个嵌套表格，以展示更多详细信息。这样用户可以方便地查看和比较数据。
# 4. 应用自定义样式
在BootstrapTable中，除了可以自定义表格内容的格式化之外，还可以应用自定义样式来美化表格，使其更符合你的项目需求。
#### 4.1 使用CSS修改表格样式
通过使用自定义的CSS样式，你可以轻松地修改BootstrapTable中表格的外观。比如，你可以修改表格的边框样式、背景色、文字颜色等来定制你想要的表格外观。
下面是一个简单的示例，演示如何通过CSS样式来修改表格的外观：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<title>Customizing BootstrapTable with CSS</title>
<style>
/* 自定义表格样式 */
.custom-table {
background-color: #f5f5f5;
border: 2px solid #ccc;
border-radius: 5px;
}
.custom-table th, .custom-table td {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<table id="example" class="table custom-table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>$120</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
</body>
</html>
```
在上面的示例中，我们在`<style>`标签中定义了`.custom-table`类，用来设置表格的背景色、边框样式等。然后，在表格的`<table>`标签中使用了`custom-table`类，以应用我们自定义的表格样式。
#### 4.2 添加自定义类
除了直接修改表格样式外，你还可以添加自定义类来标记特定的行或单元格，以便对其进行特殊样式的定制化。这样的做法可以使你更加灵活地应用样式，实现你想要的效果。
下面是一个示例，演示如何通过添加自定义类来对表格进行样式定制化：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<title>Adding Custom Classes to BootstrapTable</title>
<style>
/* 自定义表格样式 */
.discount {
background-color: #ffc107;
}
.highlight {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<table id="example" class="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
<tbody>
<tr class="discount">
<td>1</td>
<td>Product 1</td>
<td>$100</td>
</tr>
<tr class="highlight">
<td>2</td>
<td>Product 2</td>
<td>$120</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
</body>
</html>
```
在上面的示例中，我们定义了`.discount`和`.highlight`两个自定义类，并分别应用到了表格的行中，实现了对特定行的样式定制化。
#### 4.3 使用插件扩展样式
除了自定义CSS样式和类外，你还可以通过使用插件来扩展BootstrapTable的样式，以实现更加丰富的表格样式效果。
一个常用的插件是`bootstrap-table-sticky-header`，它可以实现表格头部在滚动时固定在页面顶部的效果，从而提高表格的可读性和易用性。
下面是一个示例，演示如何使用`bootstrap-table-sticky-header`插件来扩展BootstrapTable的表格样式：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.15.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.css" rel="stylesheet">
<title>Extending BootstrapTable Style with Plugins</title>
</head>
<body>
<div class="container">
<table id="example"
data-toggle="table"
data-sticky-header="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>$120</td>
</tr>
<!-- 此处省略更多数据 -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
</body>
</html>
```
在上面的示例中，我们通过引入`bootstrap-table-sticky-header`插件的CSS和JS文件，并在表格的`<table>`标签中添加了`data-sticky-header="true"`的属性，从而实现了表头在滚动时固定的效果。
通过以上内容，你可以更加灵活地使用CSS样式、自定义类和插件来扩展BootstrapTable的样式，使其更符合你的项目需求。
# 5. 高级技巧与实践
在这一部分，我们将探讨如何在BootstrapTable中应用高级技巧和实践，从而提升表格的功能和用户体验。
### 5.1 导出数据到Excel或PDF
在实际项目中，有时需要将表格中的数据导出到Excel或PDF文件，以便用户进行更深入的分析或分享。BootstrapTable提供了一些插件和方法来实现这一功能。
#### 示例场景
我们将使用TableExport插件来演示如何将BootstrapTable中的数据导出到Excel和PDF文件中。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export Table Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">
</head>
<body>
<table id="myTable" data-toggle="table" data-click-to-select="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>$150</td>
</tr>
</tbody>
</table>
<button id="exportExcel">Export to Excel</button>
<button id="exportPdf">Export to PDF</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/5/bootstrap-table-export.min.js"></script>
<script>
$(document).ready(function () {
$('#exportExcel').click(function () {
$('#myTable').tableExport({type: 'excel', escape: 'false'});
});
$('#exportPdf').click(function () {
$('#myTable').tableExport({type: 'pdf', escape: 'false'});
});
});
</script>
</body>
</html>
```
#### 代码总结
- 我们添加了一个表格和两个按钮用于导出到Excel和PDF。
- 使用TableExport插件来实现导出功能。
- 点击按钮时，调用tableExport方法并指定导出类型。
#### 结果说明
用户可以点击按钮将表格数据导出到Excel或PDF文件中，便于进一步处理和分享。
### 5.2 实现行内编辑功能
有时候用户需要对表格中的数据进行实时编辑，BootstrapTable也提供了实现行内编辑的方法。
#### 示例场景
我们将演示如何使表格中的数据可编辑，并实时保存修改后的数据。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Editing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">
</head>
<body>
<table id="myTable" data-toggle="table" data-click-to-select="true" data-editable="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name" data-editable="true">Name</th>
<th data-field="price" data-editable="true">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>150</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
</body>
</html>
```
#### 代码总结
- 在表格的data属性中添加editable="true"来启用编辑功能。
- 用户可以直接在表格中双击单元格进行编辑，编辑后的数据会实时保存。
#### 结果说明
用户可以方便地在表格中编辑数据，并即时更新到后台。
### 5.3 动态加载数据
有时候我们需要根据用户的操作或者其他条件来动态加载表格数据，这在实际项目中非常常见。
#### 示例场景
我们将演示如何通过AJAX请求从服务器动态加载数据并更新表格。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Data Loading</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">
</head>
<body>
<table id="myTable" data-toggle="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: 'data.json',
dataType: 'json',
success: function (data) {
$('#myTable').bootstrapTable('load', data);
}
});
});
</script>
</body>
</html>
```
#### 代码总结
- 使用AJAX请求从服务器获取数据。
- 成功获取数据后，使用bootstrapTable方法的load来更新表格数据。
#### 结果说明
表格会从服务器动态加载数据并呈现在页面中，实现了数据的动态展示功能。
这些高级技巧和实践可以帮助我们更好地使用BootstrapTable，提升用户体验和工作效率。
# 6. 总结与展望
在本文中，我们深入探讨了在BootstrapTable中应用自定义格式和样式的方法。从安装和基本使用开始，我们学习了如何应用自定义格式和样式来美化和增强表格的显示效果。在高级技巧与实践部分，我们还介绍了如何将数据导出到Excel或PDF，并实现了行内编辑和动态加载数据的功能。
#### 6.1 总结本文内容
通过本文的学习，我们掌握了以下内容：
- 安装和创建基本的BootstrapTable
- 使用格式化器自定义表格格式
- 应用自定义样式来美化表格
- 实施高级技巧，如导出数据和行内编辑功能
在实际项目中，我们可以根据需求灵活运用这些技术，为用户提供更优雅和便捷的表格展示与交互体验。
#### 6.2 展望未来BootstrapTable的发展与应用
随着前端技术的不断更新和发展，BootstrapTable作为一个强大的表格插件，其功能和性能也将不断得到增强和优化。我们可以期待未来BootstrapTable在数据呈现、交互体验等方面有更多的特性和功能进一步完善，以满足日益增长的数据展示需求。
同时，我们也应该持续关注和学习前端技术的发展趋势，结合BootstrapTable的特性，灵活运用到实际项目中，为用户带来更好的使用体验。
总的来说，BootstrapTable作为一个优秀的表格插件，在自定义格式和样式的应用上有着广阔的发展前景。希望本文对读者有所帮助，能够启发大家更多地挖掘BootstrapTable的潜力，并在实践中不断提升自己的前端技术水平。
以上就是本文的全部内容，希望能为大家带来价值，谢谢阅读！
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )
0
0
相关推荐
专栏简介
《BootstrapTable表格利器通用教程》专栏深入探究了如何运用BootstrapTable插件打造强大的数据表格。从自定义格式和样式、插件扩展功能、数据分页显示原理、丰富表格功能到高级数据处理技术等多个方面展开讨论，帮助读者更全面地理解和应用BootstrapTable。通过实例演练，读者将掌握在BootstrapTable中实现数据分析、可视化以及数据链接与关联的技巧，从而更加灵活高效地处理数据和展示信息。本专栏旨在为开发者提供全面的指导，让其充分利用BootstrapTable这一强大工具，实现数据展示与分析的需求，提升工作效率。
最低0.47元/天 解锁专栏
买1年送3个月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )
最新推荐
【R语言时间序列数据缺失处理】
# 1. 时间序列数据与缺失问题概述
## 1.1 时间序列数据的定义及其重要性
时间序列数据是一组按时间顺序排列的观测值的集合，通常以固定的时间间隔采集。这类数据在经济学、气象学、金融市场分析等领域中至关重要，因为它们能够揭示变量随时间变化的规律和趋势。
## 1.2 时间序列中的缺失数据问题
时间序列分析中
【R语言时间序列分析】：数据包中的时间序列工具箱
# 1. 时间序列分析概述
时间序列分析作为一种统计工具，在金融、经济、工程、气象和生物医学等多个领域都扮演着至关重要的角色。通过对时间序列数据的分析，我们能够揭示数据在时间维度上的变化规律，预测未来的趋势和模式。本章将介绍时间序列分析的基础知识，包括其定义、重要性、以及它如何帮助我们从历史数据中提取有价值的信息。
R语言zoo包实战指南：如何从零开始构建时间数据可视化
# 1. R语言zoo包概述与安装
## 1.1 R语言zoo包简介
R语言作为数据科学领域的强大工具，拥有大量的包来处理各种数据问题。zoo（"z" - "ordered" observations的缩写）是一个在R中用于处理不规则时间序列数据的包。它提供了基础的时间序列数据结构和一系列操作函数，使用户能够有效地分析和管理时间序列数据。
## 1.2 安装zoo包
要在R中使用zoo包，首先需要
日历事件分析：R语言与timeDate数据包的完美结合
# 1. R语言和timeDate包的基础介绍
## 1.1 R语言概述
R语言是一种专为统计分析和图形表示而设计的编程语言。自1990年代中期开发以来，R语言凭借其强大的社区支持和丰富的数据处理能力，在学术界和工业界得到了广泛应用。它提供了广泛的统计技术，包括线性和非线性建模、经典统计测试、时间序列分析、分类、聚类等。
## 1.2 timeDate包简介
timeDate包是R语言
R语言its包自定义分析工具：创建个性化函数与包的终极指南
# 1. R语言its包概述与应用基础
R语言作为统计分析和数据科学领域的利器，其强大的包生态系统为各种数据分析提供了方便。在本章中，我们将重点介绍R语言中用于时间序列分析的`its`包。`its`包提供了一系列工具，用于创建时间序列对象、进行数据处理和分析，以及可视化结果。通过本章，读者将了解`its`包的基本功能和使用场景，为后续章节深入学习和应用`its`包打下坚实基础。
## 1.1 its包的安装与加载
首先，要使用`its`包，你需要通过R的包管理工具`install.packages()`安装它：
```r
install.packages("its")
```
安装完
【R语言高级开发】：深入RQuantLib自定义函数与扩展
# 1. R语言与RQuantLib简介
金融量化分析是金融市场分析的一个重要方面，它利用数学模型和统计技术来评估金融资产的价值和风险。R语言作为一种功能强大的统计编程语言，在金融分析领域中扮演着越来越重要的角色。借助R语言的强大计算能力和丰
【R语言混搭艺术】：tseries包与其他包的综合运用
# 1. R语言与tseries包简介
## R语言简介
R语言是一种用于统计分析、图形表示和报告的编程语言。由于其强大的社区支持和不断增加的包库，R语言已成为数据分析领域首选的工具之一。R语言以其灵活性、可扩展性和对数据操作的精确控制而著称，尤其在时间序列分析方面表现出色。
## tseries包概述
【缺失值处理策略】：R语言xts包中的挑战与解决方案
# 1. 缺失值处理的基础知识
数据缺失是数据分析过程中常见的问题，它可能因为各种原因，如数据收集或记录错误、文件损坏、隐私保护等出现。这些缺失值如果不加以妥善处理，会对数据分析结果的准确性和可靠性造成负面影响。在开始任何数据分析之前，正确识别和处理缺失值是至关重要的。缺失值处理不是单一的方法，而是要结合数据特性
复杂金融模型简化：R语言与quantmod包的实现方法
# 1. R语言简介与金融分析概述
金融分析是一个复杂且精细的过程，它涉及到大量数据的处理、统计分析以及模型的构建。R语言，作为一种强大的开源统计编程语言，在金融分析领域中扮演着越来越重要的角色。本章将介绍R语言的基础知识，并概述其在金融分析中的应用。
## 1.1 R语言基础
R语言
R语言：掌握coxph包，开启数据包管理与生存分析的高效之旅
# 1. 生存分析简介与R语言coxph包基础
## 1.1 生存分析的概念
生存分析是统计学中分析生存时间数据的一组方法，广泛应用于医学、生物学、工程学等领域。它关注于估计生存时间的分布，分析影响生存时间的因素，以及预测未来事件的发生。
## 1.2 R语言的coxph包介绍
在R语言中，coxph包（Cox Proportional Hazards Model）提供了实现Cox比
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
专栏目录
文章持续更新中，敬请期待~
最低0.47元/天 解锁专栏
买1年送3个月
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
C知道
免费提问 ( 生成式Al产品 )