第一次來寫自己的創(chuàng)作紀(jì)念哈，不知不覺都已經(jīng)過去整整四年了，好與不好還請大家擔(dān)待：
1、機(jī)緣
1. 記得是大一、大二的時(shí)候就聽學(xué)校的大牛說，可以通過寫 CSDN 博客，來提升自己的代碼和邏輯能力，以及后面工作的時(shí)候是一個(gè)亮點(diǎn)(小心思)；
2. 后面有的時(shí)候?qū)懹械臅r(shí)候不寫，但陸陸續(xù)續(xù)沒怎么斷過，文章越來越多，看到別人通過自己的文章能解決一樣的問題，真的很開心，發(fā)現(xiàn)不斷的記錄與創(chuàng)作也是很有意義的；
3. 寫解決問題的過程、如何使用一個(gè)組件、如何創(chuàng)建一個(gè)項(xiàng)目的過程、等等真的是一種享受，它可以將自己享受的過程通過文字進(jìn)行有力的表達(dá)，同時(shí)也可以加強(qiáng)自己的記憶，下次遇到類似的問題，直接把文章拿出來一看，可以快速的解決所遇到的類似問題，例如：
4. 實(shí)戰(zhàn)中的項(xiàng)目經(jīng)驗(yàn)也有很多：
在 vue 項(xiàng)目中如何使用 element-ui 的 table 表格的樣式、
node 如何與 node-sass 及 sass-loader 的版本匹配、Mysql 重裝時(shí)如何釋放被占用的 3306 端口等等；
5 、日常學(xué)習(xí)過程中的記錄
在平常的學(xué)習(xí)過程中感覺有意思的都記錄下來了，但大多是問題的解決辦法，如：
如何找到 C 盤中的 AppData 文件夾、
如何止 flash 彈出來的廣告、
如何檢查 IDEA 軟件到期時(shí)間等等;
6、通過文章進(jìn)行技術(shù)交流：
通過技術(shù)和私信交流的事情就更多了，好多都是遠(yuǎn)程來幫忙解決我文章所述的問題的：
其一、解決 C友 mongoDB 安裝及設(shè)置簡化命令的問題：
其二、 與 C友 交流文章問題和提出更好的方法：
其三、遠(yuǎn)程幫助 C友 解決 node 與 node-sass 及 sass-loader 等等的問題：
2、 收獲
當(dāng)然了，在創(chuàng)作后也會(huì)后很多收獲：
1、訪問量達(dá)到了 87W + ，469 名粉絲關(guān)注了我，有 34 個(gè)鐵粉；
2、原力達(dá)到了 7 級，獲得了 1209 個(gè)贊，780 次評論，2848 次收藏，5675 次代碼片分享；
3、當(dāng)然了，還有 CSDN 的紀(jì)念章：
3.日常
1、創(chuàng)作已經(jīng)是我生活的一部分了，感覺不斷地創(chuàng)作與分享也是自我成長的一部分，通過創(chuàng)作能加強(qiáng)自己的記憶力，也算是給自己留下的一筆寶藏了；
2、當(dāng)然，工作是第一位的，遇到問題可以將問題先記錄下來，稍后有時(shí)間再解決并總結(jié)，然后就創(chuàng)作和分享了；
3、當(dāng)然在此非常感謝一位好兄弟，在他的影響下我才能不斷的寫作與分享呀：
4.成就
我認(rèn)為寫的最好的文章或代碼，永遠(yuǎn)是在下一篇：
但目前記憶尤新的就是要將 element-ui 中的 Table 樣式改造的業(yè)務(wù)需求：
A、頁面展示為：
B、代碼為：
<template>
<div class="container">
<el-table
:data="tableData"
:height="tabHeight"
:width="tabWidth"
class="container-table"
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="process" label="">
<!-- 此時(shí)就是 slot-scope="scope" 的使用過程: -->
<template slot-scope="scope">
<div
class="table_right"
v-for="(iterm, indx) in scope.row.process"
:key="indx"
style="float: left; color: black"
>
<span class="table-circle">{{ iterm.order }}</span>
<!-- 此時(shí)引入的是：element-ui 中的 icon 值； -->
<span class="el-icon-right"></span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// tabHeight 與 tabWidth 是為了設(shè)置：表格的寬度與高度(即：在頁面中的展示位置);
tabHeight: window.innerHeight - 150,
tabWidth: window.innerWidth - 1000,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1518 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1517 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1519 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1516 弄",
process: [
{
order: "01",
},
{
order: "02",
},
{
order: "03",
},
{
order: "04",
},
{
order: "05",
},
],
},
],
};
},
};
</script>
<style lang="scss" scoped>
// 設(shè)置整個(gè)表格的內(nèi)邊距問題:
.container-table {
padding: 0 30px 0 30px;
}
//設(shè)置表頭的背景色(可以設(shè)置和頁面背景色一致):
/deep/.el-table th {
background-color: #00083e;
}
//設(shè)置表每一行的背景色,字體顏色及字體粗細(xì)；
/deep/.el-table tr {
background-color: rgba(150, 157, 128, 0.9);
color: #fff;
font-weight: 500;
}
//去除表格每一行的下標(biāo)線；
/deep/.el-table td {
border-bottom: none;
}
//去除表頭的下標(biāo)線；
/deep/.el-table th.is-leaf {
border-bottom: none;
}
//去除表格的最下邊框線；
.el-table::before {
height: 0;
}
//設(shè)置表格的背景色問題(否則一般默認(rèn)的背景色是白色)；
.el-table,
.el-table__expanded-cell {
background-color: #00083e;
}
//設(shè)置表格的行間距；
::v-deep .el-table__body {
-webkit-border-vertical-spacing: 13px;
}
//設(shè)置標(biāo)題行(th)的字體屬性；
::v-deep .el-table th > .cell {
line-height: 11px;
font-size: 5px;
padding-left: 20px;
}
//設(shè)置 table 中的每個(gè) cell 的屬性值；
::v-deep .el-table .cell {
padding-left: 20px;
line-height: 58px;
}
//設(shè)置 table 中的 th td 的 padding 值；
::v-deep .el-table td,
::v-deep .el-table th {
padding: 0;
}
//將表格的每一行懸停的背景色都設(shè)置為：transparent;
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: transparent;
}
//設(shè)置插入 scope 的用于標(biāo)記序號的圓；
.table-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgb(106, 248, 18);
margin: 6px 5px 0 0;
display: inline-block;
text-align: center;
line-height: 29px;
}
//設(shè)置插入 scope 的值考左對齊；
.table_right{
float: left;
}
//將插入 sope 的最后一個(gè) icon 值設(shè)置為：不顯示；
.table_right:last-of-type {
/deep/.el-icon-right {
display: none;
}
}
// 設(shè)置 Element-ui 小圖標(biāo)的屬性；
.el-icon-right{
width: 20px;
height: 20px;
padding: 0 5px 0 5px;
color: red;
}
</style>
5.憧憬
1、職業(yè)規(guī)劃：
大方向不變：在以前端為背景下，不斷的學(xué)習(xí)新的技術(shù)，爭取做前端領(lǐng)域的大牛；
2、創(chuàng)作規(guī)劃：
沒有什么大的規(guī)劃，就是有時(shí)間就寫，整理問題、代碼、遇到問題的解決方案，當(dāng)然也想做出自己的VIP專欄
3、還請多多關(guān)注博主和我的專欄:
https://blog.csdn.net/weixin_43405300https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章來源：http://www.zghlxwxcb.cn/news/detail-483472.html
4、當(dāng)然可以提出關(guān)于專欄的建議以及關(guān)于前端創(chuàng)作的建議，期待評論與交流！文章來源地址http://www.zghlxwxcb.cn/news/detail-483472.html
到了這里，關(guān)于我的創(chuàng)作紀(jì)念日之這四年的收獲與體會(huì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
