一、再layui官网上查看数据表格的使用方式
查看代码实例不使用 toolbar工具栏，分页功能之类的就不在创建渲染实例的声明
二、根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器
以图为例，思考使用的是layui的数据表格，表格中使用了下拉菜单，还有最后一列相当于操作列可以使用toolbar在对应列去绑定模板
以图为例，思考使用的是layui的数据表格，表格中使用了时间选择器，可以通过绑定模板和绑定事件去实现，当时间选择器触发后选择时间找到相对应的模板将时间进行渲染
这里可以发现每个时间选择器的id要是唯一的，才能触发不同行的，否则会发现触发完成后所有行的时间是一样的。这里我们通过{{d.LAY_TABLE_INDEX}}去绑定他的index
三、代码实现
1.下拉菜单和删除列的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui-v2.7.6/layui/css/layui.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 100px;
background: #f2f2f2;
}
html {
font-size: 100px;
}
.box-zyml-table {
width: 1250px;
border: 1px solid red;
}
a[lay-event="detail"],
a[lay-event="del"] {
font-family: Helvetica;
font-size: .17rem;
color: #2A82E4;
letter-spacing: 0;
font-weight: 400;
}
/* 设置删除的按钮样式 */
.layui-layer-dialog .layui-layer-content {
/* 字体大小; !important：提升指定样式规则的应用优先权 */
font-size: .16rem !important;
line-height: 0 !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
padding: .2rem !important;
position: relative;
color: #2d2d2d;
/* font-weight: bold; */
word-break: break-all;
}
.layui-layer-btn {
/* //按钮的内边距 */
padding: 0px 0px .1rem !important;
margin-top: .2rem;
}
.layui-layer-btn a {
/* 按钮中字体的大小 */
height: .28rem !important;
line-height: .28rem !important;
margin: .05rem .05rem 0 !important;
border: .01rem solid #dedede !important;
font-size: .16rem !important;
border-radius: .02rem !important;
padding: 0.005rem 0.15rem !important;
}
/* 专业门类的数据表格样式 */
.box-zyml-table .layui-table thead tr{
height: .6rem;
background: #F9FCFE;
}
.box-zyml-table .layui-table tr{
height: .6rem;
}
.box-zyml-table .layui-table-header{
border: none;
}
.box-zyml-table .layui-table-header table >thead tr th{
font-family: 'PingFangSC-Medium';
font-size: .2rem;
color: #1A1A1A;
letter-spacing: .0067rem;
line-height: .3rem;
font-weight: 600;
border-bottom: .02rem solid rgba(230,230,230,1);
}
.box-zyml-table .layui-table head tr{
background: #F9FCFE;
}
.box-zyml-table .layui-table th:last-child{
background: #fff;
border: none;
}
.box-zyml-table .layui-table-body table tr td{
/* border: .01rem solid rgba(230,230,230,1); */
}
.box-zyml-table .layui-table tbody td:last-child{
background: #fff;
border: none;
}
/* 专业门类的下拉菜单的样式 */
.box-zyml-table .layui-form-select .layui-input {
height: .4rem;
text-align: center;
margin-top: -0.06rem;
font-family: PingFangSC-Regular;
font-size: .2rem;
color: #666666;
letter-spacing: 0;
font-weight: 400;
}
.box-zyml-table .layui-form-select .layui-edge{
width: .12rem;
height: .07rem;
color: #999999;
}
.box-zyml-table .layui-form-select dl dd.layui-this{
background-color: #3389E0;;
}
.box-zyml-table .layui-form-select dl dd, .layui-form-select dl dt{
padding: 0 .1rem;
line-height: .4rem;
font-family: PingFangSC-Regular;
font-size: .2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 最后一列实现设计稿的样式 */
.box-zyml-table .layui-table-body table tr td:last-child div{
display: flex;
align-items: center;
}
.box-zyml-table .layui-table-body table tr td:last-child div a{
font-family: PingFangSC-Regular;
font-size: .18rem;
color: #3389E0;
letter-spacing: 0;
text-align: center;
font-weight: 400;
margin-left: .12rem;
}
.box-zyml-table .layui-table-body table tr td:last-child div .yuan{
display: inline-block;
width: .24rem;
height: .24rem;
background: #3389E0;
border-radius: 50%;
position: relative;
margin-left: .2rem;
}
.box-zyml-table .layui-table-body table tr td:last-child div .yuan >div{
position: absolute;
width: .18rem;
height: .02rem;
background: #fff;
top: 45%;
left: .03rem;
}
</style>
</head>
<body>
<!-- 专业门类的数据表格 -->
<div class="box-zyml-table">
<table class="layui-hide" id="shuju-index1" lay-filter="test1"></table>
</div>
</body>
<!-- 数据表格中的删除 -->
<script type="text/html" id="barDemo">
<div>
<div class="yuan">
<div></div>
</div>
<a class="" lay-event="del">删除</a>
</div>
</script>
<!-- 这里的专业门类菜单 -->
<script type="text/html" id="zyChecked">
<select name="zyType" lay-filter="selectDemo">
<option value="">请选择</option>
<option value="行业管理与研究类">行业管理与研究类</option>
<option value="社会管理与研究类">社会管理与研究类</option>
<option value="酒店管理与研究类">酒店管理与研究类</option>
</select>
</script>
<!-- 这里的一级下拉菜单 -->
<script type="text/html" id="yijiChecked">
<select name="yjzy" lay-filter="selectDemo1">
<option value="">请选择</option>
<option value="工业">工业</option>
<option value="文科">文科</option>
<option value="理科">理科</option>
</select>
</script>
<!-- 这里的二级下拉菜单 -->
<script type="text/html" id="erjiChecked">
<select name="ejzy" lay-filter="selectDemo2">
<option value="">请选择</option>
<option value="信息安全">信息安全</option>
<option value="大数据">大数据</option>
<option value="云计算">云计算</option>
</select>
</script>
<!-- 这里的三级下拉菜单 -->
<script type="text/html" id="sanjiChecked">
<select name="sjzy" lay-filter="selectDemo3">
<option value="">请选择</option>
<option value="信息安全研究">信息安全研究</option>
<option value="大数据管理">大数据管理</option>
<option value="大数据研究">大数据研究</option>
</select>
</script>
<script src="./layui-v2.7.6/layui/layui.js"></script>
<script src="./JS/jquery.min.js"></script>
<script>
$(function () {
//适配图表table中的文字样式大小
function getFontSize(size, defalteWidth = 1920) {
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log(clientWidth);
if (!clientWidth) return size;
let scale = (clientWidth / defalteWidth);
return Number((size * scale).toFixed(3));
}
//监听页面宽度,自适应窗口尺寸
$(window).resize(function () {
// window.location.reload()
// 监控窗口宽度变化
let width = $(window).width();
let size = (100 * width) / 1920;
$(document.body).css("font-size", size + "px");
$("html").css("font-size", size + "px");
$("body").css("font-size", size + "px");
});
//重新加载页面时候执行,自适应窗口尺寸
$(window).load(function () {
let width = $(window).width();
let size = (100 * width) / 1920;
$(document.body).css("font-size", size + "px");
$("html").css("font-size", size + "px");
$("body").css("font-size", size + "px");
layui.table.reload("moren")
})
// 专业门类表格数据
layui.use(['table', 'form', 'jquery'], function () {
var table0 = layui.table,
$ = layui.$,
form = layui.form;
console.log(form);
// 创建渲染实例
table0.render({
elem: '#shuju-index1'
, id: 'shuju-index1'
, url: './json/mxMr.json' // 此处为静态模拟数据，实际使用时需换成真实接口
, width: getFontSize(1250)
, cols: [[
{ field: 'zyType', title: '专业门类', align: "center",templet:'#zyChecked'},
{ field: 'yjzy', title: '一级专业', align: "center",templet: '#yijiChecked'},
{ field: 'ejzy', title: '二级专业', align: "center",templet:'#erjiChecked' },
{ field: 'sjzy', title: '三级专业', align: "center",templet:'#sanjiChecked' },
{ field: 'caozuo', title: '', toolbar: '#barDemo', width: "10%", align: "center" },
]]
, error: function (res, msg) {
console.log(res, msg)
},
/* 解决下拉菜单被遮挡的问题 */
done: function (res, curr, count) {
$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow','visible');
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
form.render();
}
});
//触发单元格工具事件
table0.on('tool(test1)', function (obj) { // 双击 toolDouble
var data = obj.data;
console.log(obj);
//console.log(obj)
if (obj.event === 'del') {
// layer.confirm('确认删除此数据吗？', function (index) {
// console.log(index);
// obj.del();
// layer.close(index);
// });
layer.confirm('确认删除此数据吗？', {
title: ['删除', `font-size:${getFontSize(20)}px;`],
area: [`${getFontSize(240)}px`, `${getFontSize(150)}px`], //弹框的大小
btn: ['确定', '取消'] //按钮
}, function (index) {
obj.del();
layer.close(index);
}, function () {
//点击“还没”执行的操作
}
)
}
});
// //监听专业门类下拉
// 监听修改update到表格中
form.on('select(selectDemo)', function (data) {
var elem = $(data.elem);
console.log(data.elem);
var trElem = elem.parents('tr');
console.log(trElem);
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
});
// //监听一级专业下拉
form.on('select(selectDemo1)', function (data) {
console.log(data.elem);
var elem = $(data.elem);
var trElem = elem.parents('tr');
console.log(trElem);
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
});
// //监听二级专业下拉
form.on('select(selectDemo2)', function (data) {
console.log(data.elem);
var elem = $(data.elem);
var trElem = elem.parents('tr');
console.log(trElem);
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
});
//监听二级专业下拉
form.on('select(selectDemo3)', function (data) {
console.log(data.elem);
var elem = $(data.elem);
var trElem = elem.parents('tr');
console.log(trElem);
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
});
});
})
</script>
</html>2.下拉菜单和删除列的代码（这里只对上面下拉菜单的第一列进行了改造变成了时间选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui-v2.7.6/layui/css/layui.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 100px;
background: #f2f2f2;
}
html {
font-size: 100px;
}
.box-zyml-table {
width: 1250px;
border: 1px solid red;
}
a[lay-event="detail"],
a[lay-event="del"] {
font-family: Helvetica;
font-size: .17rem;
color: #2A82E4;
letter-spacing: 0;
font-weight: 400;
}
/* 设置删除的按钮样式 */
.layui-layer-dialog .layui-layer-content {
/* 字体大小; !important：提升指定样式规则的应用优先权 */
font-size: .16rem !important;
line-height: 0 !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
padding: .2rem !important;
position: relative;
color: #2d2d2d;
/* font-weight: bold; */
word-break: break-all;
}
.layui-layer-btn {
/* //按钮的内边距 */
padding: 0px 0px .1rem !important;
margin-top: .2rem;
}
.layui-layer-btn a {
/* 按钮中字体的大小 */
height: .28rem !important;
line-height: .28rem !important;
margin: .05rem .05rem 0 !important;
border: .01rem solid #dedede !important;
font-size: .16rem !important;
border-radius: .02rem !important;
padding: 0.005rem 0.15rem !important;
}
/* 专业门类的数据表格样式 */
.box-zyml-table .layui-table thead tr{
height: .6rem;
background: #F9FCFE;
}
.box-zyml-table .layui-table tr{
height: .6rem;
}
.box-zyml-table .layui-table-header{
border: none;
}
.box-zyml-table .layui-table-header table >thead tr th{
font-family: 'PingFangSC-Medium';
font-size: .2rem;
color: #1A1A1A;
letter-spacing: .0067rem;
line-height: .3rem;
font-weight: 600;
border-bottom: .02rem solid rgba(230,230,230,1);
}
.box-zyml-table .layui-table head tr{
background: #F9FCFE;
}
.box-zyml-table .layui-table th:last-child{
background: #fff;
border: none;
}
.box-zyml-table .layui-table-body table tr td{
/* border: .01rem solid rgba(230,230,230,1); */
}
.box-zyml-table .layui-table tbody td:last-child{
background: #fff;
border: none;
}
/* 专业门类的下拉菜单的样式 */
.box-zyml-table .layui-form-select .layui-input {
height: .4rem;
text-align: center;
margin-top: -0.06rem;
font-family: PingFangSC-Regular;
font-size: .2rem;
color: #666666;
letter-spacing: 0;
font-weight: 400;
}
.box-zyml-table .layui-form-select .layui-edge{
width: .12rem;
height: .07rem;
color: #999999;
}
.box-zyml-table .layui-form-select dl dd.layui-this{
background-color: #3389E0;;
}
.box-zyml-table .layui-form-select dl dd, .layui-form-select dl dt{
padding: 0 .1rem;
line-height: .4rem;
font-family: PingFangSC-Regular;
font-size: .2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 最后一列实现设计稿的样式 */
.box-zyml-table .layui-table-body table tr td:last-child div{
display: flex;
align-items: center;
}
.box-zyml-table .layui-table-body table tr td:last-child div a{
font-family: PingFangSC-Regular;
font-size: .18rem;
color: #3389E0;
letter-spacing: 0;
text-align: center;
font-weight: 400;
margin-left: .12rem;
}
.box-zyml-table .layui-table-body table tr td:last-child div .yuan{
display: inline-block;
width: .24rem;
height: .24rem;
background: #3389E0;
border-radius: 50%;
position: relative;
margin-left: .2rem;
}
.box-zyml-table .layui-table-body table tr td:last-child div .yuan >div{
position: absolute;
width: .18rem;
height: .02rem;
background: #fff;
top: 45%;
left: .03rem;
}
/* 教育时间选择的样式 */
.JyTimeBox{
width: 246px;
height: 40px;
background: #FFFFFF;
border: 1px solid rgba(215,215,215,1);
margin-top: -6px;
display: flex;
align-items: center;
justify-content: center;
}
.JyTimeBox span{
font-family: PingFangSC-Regular;
font-size: 20px;
color: #666666;
letter-spacing: 0;;
font-weight: 400;
}
.JyTimeBox span:nth-child(2){
margin: 0 10px 0 10px;
}
.JyTimeBox img{
width: 20px;
height: 20px;
margin-left:20px;
}
</style>
</head>
<body>
<!-- 教育经验的数据表格 -->
<div class="box-zyml-table">
<table class="layui-hide" id="shuju-index2" lay-filter="test2"></table>
</div>
</body>
<!-- 数据表格中的删除 -->
<script type="text/html" id="barDemo">
<div>
<div class="yuan">
<div></div>
</div>
<a class="" lay-event="del">删除</a>
</div>
</script>
<!-- 这里的一级下拉菜单 -->
<script type="text/html" id="yijiChecked">
<select name="yjzy" lay-filter="selectDemo1">
<option value="">请选择</option>
<option value="工业">工业</option>
<option value="文科">文科</option>
<option value="理科">理科</option>
</select>
</script>
<!-- 这里的二级下拉菜单 -->
<script type="text/html" id="erjiChecked">
<select name="ejzy" lay-filter="selectDemo2">
<option value="">请选择</option>
<option value="信息安全">信息安全</option>
<option value="大数据">大数据</option>
<option value="云计算">云计算</option>
</select>
</script>
<!-- 这里的三级下拉菜单 -->
<script type="text/html" id="sanjiChecked">
<select name="sjzy" lay-filter="selectDemo3">
<option value="">请选择</option>
<option value="信息安全研究">信息安全研究</option>
<option value="大数据管理">大数据管理</option>
<option value="大数据研究">大数据研究</option>
</select>
</script>
<!-- //教育的时间选择 -->
<script type="text/html" id="timeTP">
<div class="JyTimeBox" id="Jydate_{{d.LAY_TABLE_INDEX}}"><span>开始时间</span> <span>-</span> <span>结束时间</span> <img src="./image/time.png">
</script>
<script src="./layui-v2.7.6/layui/layui.js"></script>
<script src="./JS/jquery.min.js"></script>
<script>
$(function () {
//适配图表table中的文字样式大小
function getFontSize(size, defalteWidth = 1920) {
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log(clientWidth);
if (!clientWidth) return size;
let scale = (clientWidth / defalteWidth);
return Number((size * scale).toFixed(3));
}
//监听页面宽度,自适应窗口尺寸
$(window).resize(function () {
// window.location.reload()
// 监控窗口宽度变化
let width = $(window).width();
let size = (100 * width) / 1920;
$(document.body).css("font-size", size + "px");
$("html").css("font-size", size + "px");
$("body").css("font-size", size + "px");
});
//重新加载页面时候执行,自适应窗口尺寸
$(window).load(function () {
let width = $(window).width();
let size = (100 * width) / 1920;
$(document.body).css("font-size", size + "px");
$("html").css("font-size", size + "px");
$("body").css("font-size", size + "px");
layui.table.reload("moren")
})
// 教育类表格数据
layui.use(['table', 'form', 'jquery','laydate'], function () {
var table0 = layui.table,
$ = layui.$,
form = layui.form;
var laydate = layui.laydate;
console.log(form);
// 创建渲染实例
table0.render({
elem: '#shuju-index2'
, id: 'shuju-index2'
, url: './json/mxMrJy.json' // 此处为静态模拟数据，实际使用时需换成真实接口
, width: getFontSize(1250)
, cols: [[
{ field: 'time', title: '时间', align: "center",event:'date1',templet:"#timeTP"},
{ field: 'yjzy', title: '一级专业', align: "center",templet: '#yijiChecked'},
{ field: 'ejzy', title: '二级专业', align: "center",templet:'#erjiChecked' },
{ field: 'sjzy', title: '三级专业', align: "center",templet:'#sanjiChecked' },
{ field: 'caozuo', title: '', toolbar: '#barDemo', width: "10%", align: "center" },
]]
, error: function (res, msg) {
console.log(res, msg)
},
/* 解决下拉菜单被遮挡的问题 */
done: function (res, curr, count) {
$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow','visible');
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
form.render();
}
});
//触发单元格工具事件
table0.on('tool(test2)', function (obj) { // 双击 toolDouble
var data = obj.data;
console.log(obj);
//console.log(obj)
if (obj.event === 'del') {
// layer.confirm('确认删除此数据吗？', function (index) {
// console.log(index);
// obj.del();
// layer.close(index);
// });
layer.confirm('确认删除此数据吗？', {
title: ['删除', `font-size:${getFontSize(20)}px;`],
area: [`${getFontSize(240)}px`, `${getFontSize(150)}px`], //弹框的大小
btn: ['确定', '取消'] //按钮
}, function (index) {
obj.del();
layer.close(index);
}, function () {
//点击“还没”执行的操作
}
)
}
if(obj.event === 'date1'){
var newdata = {};
//这里通过$(this)得到时间选择器的id的值
var field = $(this).data('field');
console.log(this.children[0].children[0].id);
let idel=this.children[0].children[0].id
layui.laydate.render({
elem: `#${idel}`,
show: true ,//直接显示
type: 'month'
,closeStop: this,
trigger:"click"
, theme: "#1890FF" //主题颜色
,format: 'yyyy.MM' //可任意组合
, range: "-",
value:getDefaultDate(),//控制点击进去默认开始结束选择的日期
// 选择完毕后的数据
done: function (value, date, endDate) {
// console.log(value); //得到日期生成的值，如：2017-08-18
// console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
// console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
if (value) {
console.log(value);
let dataArr = value.split('-')
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
obj.data[field]=value
obj.update(obj.data)
console.log($(`#${idel} span:nth-child(1)`));
//这里通过idel去将时间渲染到对应的时间模板中
$(`#${idel} span:nth-child(1)`).text(dataArr[0])
$(`#${idel} span:nth-child(3)`).text(dataArr[1])
// 为了打印得到表里的每一行所有数据
var tableData = table0.cache['shuju-index2']; // 为table id
console.log(tableData);
} else {
obj.data[field]=''
obj.update(obj.data)
var tableData = table0.cache['shuju-index2']; // 为table id
console.log(tableData);
}
}
})
}
});
//监听一级专业下拉
form.on('select(selectDemo1)', function (data) {
console.log(data);
var elem = $(data.elem);
var trElem = elem.parents('tr');
console.log(trElem);
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
});
// //监听二级专业下拉
form.on('select(selectDemo2)', function (data) {
console.log(data.elem);
var elem = $(data.elem);
var trElem = elem.parents('tr');
console.log(trElem);
var tableData = table0.cache['shuju-index1']; // 为table id
console.log(tableData);
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
});
//监听二级专业下拉
form.on('select(selectDemo3)', function (data) {
console.log(data.elem);
var elem = $(data.elem);
var trElem = elem.parents('tr');
console.log(trElem);
var tableData = table0.cache['shuju-index1']; // 为table id
// 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
tableData[trElem.data('index')][elem.attr('name')] = data.value;
console.log(tableData);
});
});
//日期选择默认选择的日期
function getDefaultDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var start = year + "." + month;
var endDate = new Date();
console.log(endDate);
var end = year + "." + 12;
return start + " - " + end;
}
})
</script>
</html>注意：这里数据表格中使用下拉菜单时会被表格挡住，所以在他的实例化的done回调函数中 $(“.layui-table-body, .layui-table-box, .layui-table-cell”).css(‘overflow’,’visible’);将本身数据表格超出隐藏设置为超出后显示并且不把父级撑开。
实现效果：
1.下拉菜单的
2.时间选择器
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79804.html
