<input style="cursor: pointer;vertical-align: middle;margin-left: 6px;" class="Alldownlode" @click="AlldownlodeFun()" type="checkbox" v-model="check">
<span style="color:#496fec">全选</span>
<i class="el-icon-download" @click="downLoad()"></i>
<el-table
:data="tableData"
:header-cell-style="tableHeaderColor"
height="95%"
:cell-style="cellStyle"
style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column
:render-header="renderHeader"
label="时间" width="40">
<el-table-column prop="operDate" :formatter="formatDate" >
</el-table-column>
</el-table-column>
<el-table-column
:render-header="renderHeader"
label="产品型号" width="30">
<el-table-column prop="eqName" >
</el-table-column>
</el-table-column>
<el-table-column
width="45"
:render-header="renderHeader"
label="氧气浓度">
<el-table-column prop="o2nd" >
</el-table-column>
</el-table-column>
<el-table-column
width="45"
:render-header="renderHeader"
label="氮气流量" >
<el-table-column prop="n2nd" >
</el-table-column>
</el-table-column>
<el-table-column
width="45"
:render-header="renderHeader"
label="焊剂浓度" >
<el-table-column prop="hjnd" >
</el-table-column>
</el-table-column>
<el-table-column
width="45"
:render-header="renderHeader"
label="网带速度" >
<el-table-column prop="wdsd" >
</el-table-column>
</el-table-column>
</el-table>
重要代码::render-header="renderHeader"
data(){
return{
check:false//全选默认为不选中
}
}
methods:{
renderHeader (h, { column, $index }) {
// 这里可以根据$index的值来对自身需求进行修改,
return [
h('span', [
h('input', {
on:{
change: ($event) => { this.handleChange($event,{ column, $index}) },
},
'class':'checkbox',
attrs:{
type:'checkbox',
value:column.label,
index:$index
},
// props:{
// 'checked':true
// }
}),
h('span', column.label)
]),
h('span', {
'class': ['virtual']
})
]
},
// 点击表头的选框时
handleChange($event, column){
console.log($event)
if($event.target.checked==true){
console.log(column.$index)
console.log(column.column.label)
}else if($event.target.checked==false){
console.log(column)
}
},
<!--点击了下载时--><!--让所有选中的框不选中-->
downLoad(){
let AllArr=document.querySelectorAll('.checkbox')
for(var c=0;c<AllArr.length;c++){
console.log(AllArr[c].checked)
AllArr[c].checked=false;
}
}
<!--点击了全选时让所有的选中-->
AlldownlodeFun(){
console.log(document.querySelectorAll('.checkbox'))
var _this = this
let AllArr=document.querySelectorAll('.checkbox')
for(var c=0;c<AllArr.length;c++){
if(!_this.check){
AllArr[c].checked=true;
this.tableSort.push({
name:[AllArr[c].value],
index:c
})
}else{
AllArr[c].checked=false;
}
}
},
}
复制代码
vue中使用自定义表头并实现按列导出的功能
最新推荐文章于 2024-07-30 10:39:47 发布