Laughing
修改elementUI中el-table树形结构图标
05/19
本文最后更新于2024年03月21日，已超过37天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！
elementUI中的表格，可以显示成树形的结构，默认的样式，跟el-tree的样式一样，el-table如果是树形结构的话，如果树形有下级的话，显示的是一个小三角号，如果没有下级的话，是没有图标的。
感觉这种图标不是特别好看，为了美化，我们可以替换成自己的图标。
如果我们想改变树形的图标，可以在vue的style中加入以下样式
<style scoped>
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/*有子节点 且未展开*/
.el-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before {
background: url('../../../../assets/images/文件夹未展开.png') no-repeat;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*有子节点 且已展开*/
.el-table /deep/ .el-table__expand-icon--expanded{
-webkit-transform: rotate(0);
transform: rotate(0);
}
.el-table /deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before {
background: url('../../../../assets/images/文件夹展开.png') no-repeat;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
/*没有子节点*/
.el-table /deep/ .el-table__placeholder::before {
background: url('../../../../assets/images/文件.png') no-repeat;
content: '';
display: block;
width: 16px;
height: 16px;
font-size: 16px;
background-size: 16px;
}
</style>
版权属于：
香草物语
本文链接：
https://www.xiangcaowuyu.net/web/modify-the-el-table-tree-structure-icon-in-elementui.html（转载时请注明本文出处及文章链接）
作品采用：
{!{data:image/webp;base64,UklGRrgJAABXRUJQVlA4WAoAAAAQAAAAAQMAKwEAQUxQSL8HAAAB8If/v2k3/v89O5OJBnFSu02T2m7jpIqmtm0jnewytW0zRj2pbdu2jccfZ+2zT3XOWuuFHRETQLr/df/r/tf9r/tf97/uf93/uv91/+v+1/2v+1/3v+5/3f+6/3X/6/7X/a/7/yecRckp+ynA7e5ynwIAR6W+aBhulfnGg9lU4ksBUyF5XwFTIXlfAVMheV8BM57kfQXMScQvC/v4CK5oMBXil0E3gGPdRFY0mApxzK0w3OkhrKLBVIh/YF9hQRUNpkJcs9IbBq4GCKkVYCrEOUMvMfC6oXgKPQ+mQvwzjQH0EEwlloKtEA8dwUKMSHKLeQe2Qny0CwsLxFHHS1BNIV5a5x0Dqa5iKHQrVJ8MJn5a9RoDBwsKoBJLofouxo14qtc+Bq77iR63mHdQXVqCOKtLEgPv6gudrKsfQHVrKHHY2Qygm7ApHHUI6pc6Ep8dxsJIIVN5/FkY+S7GjXhtFxbihEvonGswemkJ4rj1XjOw/1eB4tB46X0YfzmU+K7vZQY2FxIkOdqsfQHjPx0bQ9y30F4GbtYWIcP2foTxz5Y3z0I82H0fA4gSHn6XYfztGZF/Ejcey8KyP4VGwE4YfXGMP/HlKhcYOFRWXATvhrHHldLEn90TGHjVXFBU2wMj9/bxJE49jAGMERE1dkH9xMxMxLEbvGQg1UM01NoB9cQaxLlL7mPgsq9QCN8G9fhqxL//mMcA+oqDyHSoxwYTH+/LQoogqL0F6msCiZuHXWdgjgiovRnqsf7E0702MpDgwvsiN0I93o84+y9bGNhVgOuFr4d6og9x+DEMnK/M70LToJ5Shfh8g08GeBLJ5azLTj8C9bRKxO397xgA7Tibs3+vZadg7PoKxPMLH2MgiptlD1MSr0PjxvLE+TNuYmAyB/NuNG7LA2jfUpH4v9UyBlZYcyzrsu1m7X0Jk16tTGJwIgObsnIpZ/9ey459hmmfHE7sScJwAANHi3Om7GFK3AWY+Ob6sU1LWJNQbMXArWBu5N1ozLqbMPH5WOVvTxKRtZ4Z4H0T/mNdtt3UbY9h4qOLe4dkJXFZ7oIB0JPnOPt3n7//DUz7eteMDpWdSHTm3cVADJ/JXmvAipMw8cNNY5uWsCYx6hDPwDze4l13WOIlmPhagvK3J4nVWQwkOfIS65LNx228AxOfWd47JCuJ2KEM7MnHQXJN2nrqKUz7+dDcjpWdSNx2YeBiRc5RdcxpmPbF9knNS1iT6G3w3gDPwvmFU+OVz2HKe+tH1vEkQRxw0wBoyyeKDNwNE16Ji6qRlYRy0cMMDOIOGWrOvALNJ5f08HEiAZ1lAwOTuUL2DqlvoPHV0fllrElYWy9hYKUVL6gYcwhaz8+s60qCewIDWzJxgL8aLLkFrVsHVyIRPoCBE0UtvIJ9N36ExofLW+cmUd6agbsBFlzIxOPQemxcdTsS6eGPDfCpoWWWuc3K+9Ca1rM4CfeKZw2AaMurXFQ6tN6e08CDhHz+nQxssLWk7COnnYHWA0Oqkrh3jmdgfy1LybNj7BNo/JjQLh8J/tkMYKqHBVR16C5ovTat1h8kAc5n4VwTy8at3uyL0LqrfymSBUPPMIAlnhaL9+Jjb6Hx9eommUkq7P2MgXudLRGPxotuQ+uFCX4ZSDossoYBJJexLKyqjT8Bzek9C5Ck2PoaA2+jLIcyg7ZC89Ol9RxIYswxlwFsD7IE8rSPfQzNp0ZVIumxznEGMNbBvHOqM+ciND87ujgXSZEOY1k4Xsd884vZD80f/x0SaEvyZNB2BjA3hzlWrPf6V9B8ZHKdTCRbRr1l4FprMytbi+U3oPnqkrZeJGWWSWYAa4qYTfZhU49B86vkvhVI4ux8j4Fnvc2iSkr6B2jeFVP9L5I8PZcwgINdzRyvrrH3oPnczEY5SAptco4BXGxutrg3mn0Gmh+v6lSU5FGPqSzg2ZDs5odVSMwuaN8S5fMrSaa19rMALPYxK0r3SX4KzcfHhbuSjGobqwbsaGFrHuRptegyNN9e1CIvyast96kBN4Z6/+wcIyYchOYPaT1Kk+xafNxdFQAHZnv/vKpGbXwNzfuHB9qRFGvf47AagNuLm+T4+RTuuPImNF+ZXTcTybS1ko0wPDUpwv3nkaX+tOPQ/CKugzfJt/kmvTTGcOfQkD9/fHZBQ7d+guYdgyuStNv+rnEA3qQOrGr1o8qQpUzEwqOPofnMlFoOJPcO2/7EOMOHxxZUL+T443D0Dmw+cHrigdtfYMKHK1rkIBn4N39l81vj2E+OJk3t06Byrt++E6sc5Wt3G710y5lnMP3mvsVJJnaImHBAk/r7i+lJOyf26NiqcZ3QYJ/yJbzzZHX7y8ZkLkWCWwyaFr/v+kd85aNjAq1IQs7UaP55k5j83fMHNy+dOrxn64akNUvnTZ8wa2fsxpOP8U3eWtjQjSTmPG1W3vtWvstHJzZu2TDSiyTowsPXpW+7/OHH8fHa7jWT+zcNLORMsrV1Ht+mUbPTTjz9bp6e2rhgWIfwstmsSP52KlJzaOqcCdPnLV2TtGHrnsOnLt188Pydyb7c3Bc3pV9jvwIOJMHb/OWWNY93ifI+waF1Grfq2GPyhn/CS2fOQLr/df/r/tf9r/tf97/uf93/uv91/+v+1/2v+1/3v+5/3f//ixsAVlA4INIBAABQNQCdASoCAywBP3G42WW0ryunIAgCkC4JaW7hd2EbQAnsA99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snCgAA/v+tHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA}!}
{!{data:image/webp;base64,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}!}