900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue 更改 element-ui 中 el-table 默认的暂无数据样式

vue 更改 element-ui 中 el-table 默认的暂无数据样式

时间:2019-04-10 08:45:59

相关推荐

vue 更改 element-ui 中 el-table 默认的暂无数据样式

element-ui 官方提供了 table 组件暂无数据的样式信息,如果我们想要自定义暂无数据的样式信息时,那我们又该如何定义呢?

一、更改文字提示

官方提供 API:

案例如下:

<el-table:data="tableData"empty-text="没有信息">.....</el-tale>

二、更改提示文字并添加图片

当我们需要更改文字并添加图片,则需要使用 slot='empty' 属性。代码如下:

<el-table:data="tableData"><template slot="empty"><img src="https://magpie-pic.oss-cn-/c8c6da04dcb6e688749baa046262fe8d.gif" alt="" srcset=""><span>没有信息</span></template>.....</el-tale>

三、修改 CSS 信息

我们通过重新 element-ui 样式,然后覆盖掉原来的样式信息,这样可以全局一下子处理样式。只需要修改 el-table__empty-block 样式信息即可,代码如下:

.el-table__empty-block{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABACAMAAADbASJGAAABPlBMVEUAAADX19fa2trZ2dna2trZ2dn19fX19fXt7e319fX19fX19fXb29vZ2dnZ2dn29vb19fX29vb8/PzY2NjZ2dn29vb19fX19fXZ2dnZ2dnZ2dnZ2dn19fXa2tra2tr4+Pja2tr19fXZ2dn29vbb29vZ2dn19fX29vb19fXZ2dn19fX19fXZ2dn29vb29vbX19f29vbi4uLZ2dnj4+Ph4eHZ2dnZ2dnZ2dn29vb09PTZ2dn19fXa2trZ2dn19fXZ2dn19fX19fX29vb19fXZ2dn09PTY2Nj19fXa2tr39/fX19fd3d3Z2dnY2Nj19fXZ2dn29vbh4eH09PT29vbY2NjZ2dnZ2dn09PTY2NjZ2dn09PT19fXX19f6+vr19fXZ2dnp6eni4uLo6Ojg4ODk5OTx8fHt7e3r6+v4+Pjd3d2+WHiwAAAAXXRSTlMAQL+/74DlRhnp1bf85qKLfmMRBvv18KGHamFQTEszLh/89dzc186+sq2ZlV1XUjc2KCUR9OzSzMfBtLCpmpGOgHpxbmdfVT06Hgz84NPFxLGwqKeYk3h2dnFdSi2FEAZaAAACXElEQVRYw+3U11LjQBCF4WMbW3LC2YAxxuScc1xy2JyzuiUHDO//AqsLahEYSyNpuKH4rlXzV7V6Bk6WA46q8GdgjAWsl+BDhbtLAUd9YzwAz/5yCCKWhnkZHq3wW4jJMefgzXAeopY5CU9GWYWwAIfgwQcOwIUSf4Nru3wCV8LcB5d6+RVc6na7yH08BddCXIEL/RyEe7lRrkJYJf8OXlTzYznhS5hMrsCTBfEpb+Qv4FG/6L5s8yw8O+HvELDHv+BDmEsiH/XClz0ecL4gX+HTdteC04+bgl/qxnrVdgXXgq/hWyUZsjuli9vsOq7abJDbhOwihv7QKoed3sWE8ZBDRGvTGF6CjQtuaG1cR5r2O93LTQkRLdFtO62EJiNiBGEjaEiJNNZgo6smJaLzGTr6yU0pkes3yX50cMarmpSI1kxwsANONCVFNNKNDlqkeY+Ie4k8h0hQViT8EnmJPNvI0qisyKdLPCY7vx+juqxIjcZT5SzuW9yPkklixBRNDeLO3CSZpEdMPcptYjBO9FQRM3MJ02mB/jNupDSuLRGKngIKWdT4WkaEWCeLc8TJ4oqvZETMY8hiBhNkVa/LiNTrZDWNObJqccN/o8EtsioDM2RV45uG7kvthnW6Py3T7yhZ6Ab7ZLTIIjZ/e1FSEXoiscPs3cN1/J6ewEQmh3uUdLxIEhV3DhU85vzHRymDi+wcL8KOWk5P+ihFJtNlFUJUJXPQMzEyRMIKsXjPQUZR4Z66+Gcuc5ROTX+Ob22Ox0Yi0WJhaKhQjEZGYuObW/Ev06n0UWZeGczCzj/Kd2oUicxurAAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: center;background-size: 75px;margin-top: 25px;margin-bottom: 60px;span{position: relative;top: 50px;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。