*新闻详情页*/>
日期:2021-01-20 类型:科技新闻 我要分享
关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序
方式1:应用报表特性: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/的功效:假如你应用了他人的组件或自身开发设计1个组件,有时你改动1处便可能危害到其他地区,这个情况下要末你无需他人的组件,自身再次封裝1个,但许多情况下是不太实际的,因此就必须应用/deep/,既不危害到其他地区,又能改动子组件在当今的款式。
方式2、应用报表列题目特性: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; }
方式3:应用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 = '挑选' } }
方式4:不应用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>
方式5:立即根据CSS款式改动
.el-table__header .el-table-column--selection .cell .el-checkbox { display:none } .el-table__header .el-table-column--selection .cell:before { content: "挑选"; }
总结
到此这篇有关element带挑选报表将表头的复选框改为文本的文章内容就详细介绍到这了,更多有关挑选报表将表头的复选框改为文本內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!
Copyright © 2002-2020 微信小程序页面设计_python小程序_小程序首页模板_如何建立微信小程序_怎么做微信小程序 版权所有 (网站地图) 粤ICP备10235580号