element带选择表格将表头复选框改成文字的方法-创新互联
这篇文章主要介绍了element带选择表格将表头复选框改成文字的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、成都做网站、同心网络推广、微信平台小程序开发、同心网络营销、同心企业策划、同心品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联建站为所有大学生创业者提供同心建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com方法一:使用表格属性:header-cell-class-name 表格界面代码
{{ scope.row.date }}
对应js
data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods: { cellclass(row){ if(row.columnIndex===0){ return 'DisabledSelection' } } }
对应CSS
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{ display:none; position:relative; } .el-table /deep/.DisabledSelection .cell:before{ content:"选择"; position:absolute; right 11px; }
/deep/的作用:如果你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要使用/deep/,既不影响到别的地方,又能修改子组件在当前的样式。
方法二、使用表格列标题属性:label-class-name
界面代码
{{ scope.row.date }}
对应CSS
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{ display:none; position:relative; } .el-table /deep/.DisabledSelection .cell:before{ content:"选择"; position:absolute; right 11px; }
方法三:使用document.querySelector() 界面代码
{{ scope.row.date }}
对应js
mounted(){ this.$nextTick(()=>{ this.init(); }) }, methods: { init(){ document.querySelector(".el-checkbox__inner").style.display="none"; document.querySelector(".cell").innerHTML = '选择' } }
方法四:不使用selection选择列,重写列使用checkbox
方法五:直接通过CSS样式修改
.el-table__header .el-table-column--selection .cell .el-checkbox { display:none } .el-table__header .el-table-column--selection .cell:before { content: "选择"; }
感谢你能够认真阅读完这篇文章,希望小编分享的“element带选择表格将表头复选框改成文字的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!
分享文章:element带选择表格将表头复选框改成文字的方法-创新互联
当前路径:http://pwwzsj.com/article/deidgj.html