element带选择表格将表头复选框改成文字的方法
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍了element带选择表格将表头复选框改成文字的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
方法一:使用表格属性:header-cell-class-name 表格界面代码
<el-table ref="multipleTable" :data="tableData" :header-cell-class-name="cellclass" style="width: 100%"> <el-table-column type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" > </el-table-column> </el-table>
对应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
界面代码
<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column label-class-name="DisabledSelection" type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table>
对应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() 界面代码
<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table>
对应js
mounted(){ this.$nextTick(()=>{ this.init(); })},methods: { init(){ document.querySelector(".el-checkbox__inner").style.display="none"; document.querySelector(".cell").innerHTML = '选择' }}
方法四:不使用selection选择列,重写列使用checkbox
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="选择" width="50"> <template slot-scope="scope"> <el-checkbox></el-checkbox></template> </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>
方法五:直接通过CSS样式修改
.el-table__header .el-table-column--selection .cell .el-checkbox { display:none}.el-table__header .el-table-column--selection .cell:before { content: "选择";}
感谢你能够认真阅读完这篇文章,希望小编分享的“element带选择表格将表头复选框改成文字的方法”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341