父组件
<div class="content_main">
<div class="search_card">
<wpform style="margin-top:20px" :objForm="objForm" :formData="formData" @searchSubmit="searchSubmit(val)" ></wpform>
</div>
<div class="tableContent">
<wp_table ref="mytable" :tableData="pendingReviewdata" @rowClick="rowClick" :headerColumns="pendingReviewHeader" :sendHeight="sendHeight" >
<template #header-role>
<el-popover placement="bottom" width="100" trigger="click">
<div slot="reference">
<p>人员角色<i class="iconfont icon-chevron-down"></i></p>
</div>
<div class="advance_box">
<el-radio v-model="advanceRadio" label="0" @change="getadvanceRadio()" style="margin-top: 10px;">董事长</el-radio>
<el-radio v-model="advanceRadio" label="1" @change="getadvanceRadio()" style="margin-top: 20px;">保洁</el-radio>
<el-radio v-model="advanceRadio" label="2" @change="getadvanceRadio()" style="margin-top: 20px;">人力资源小姐姐</el-radio>
</div>
</el-popover>
</template>
<template #cont-role='{row}' >
<span>{{ row.role | getRole}}</span>
</template>
<template #cont-operate='{row}' >
<el-button type="text" size="small" @click="aaaa(row)">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</wp_table>
</div>
</div>表格通过数据默认选中
toggleSelection(){
this.pendingReviewdata.forEach(element => {
if(element.states3){
this.arr111.push(element)
}
});
console.log(this.arr111)
this.arr111.forEach((row)=>{
this.$refs.mytable.toggleRowSelection(this.pendingReviewdata.find(item=>{return row.statesitem.states}),true)
})
},界面引用
<template>
<div>
<el-table :data="tableData"
ref="wptable"
style="width: 100%;"
:border="border"
:header-cell-style="headerRowNewObj.header_style"
:row-style="headerRowNewObj.row_style"
:cell-style="headerRowNewObj.cell_style"
:stripe="stripe?stripe:false"
:row-class-name="tableRowClassName"
@select-all="checkboxAll"
@selection-change="checkboxChange"
@cell-click="cellClick"
@cell-dblclick="cellDblclick"
@row-click="rowClick"
:height="sendHeight">
<el-table-column
v-if="this.checkeBoxTh.show"
:align="this.checkeBoxTh.align?this.checkeBoxTh.align:''"
:type="this.checkeBoxTh.type"
:width="this.checkeBoxTh.width"
:fixed="this.checkeBoxTh.fixed">
</el-table-column>
<el-table-column
v-for="headerItem in headerColumns"
:label="headerItem.label"
:width="headerItem.width"
:prop="headerItem.prop"
:key="headerItem.prop"
:align="headerItem.align?headerItem.align:''"
:show-overflow-tooltip="true"
:fixed="headerItem.fixed?headerItem.fixed:false">
<!-- 表头插槽 -->
<template v-if="headerItem.prop" slot="header" slot-scope="scope">
<slot v-if="Object.keys($scopedSlots).includes('header-'+headerItem.attr) || Object.keys($slots).includes('header-'+headerItem.attr)"
:name="'header-'+ headerItem.attr" :rows="{index:scope.rowIndex,option:scope.row,keys: headerItem}">
</slot>
<slot v-else>{{ headerItem.label}} </slot>
</template>
<!-- 表格内容插槽 -->
<template v-if="headerItem.prop" slot-scope="{ row }">
<slot v-if="Object.keys($scopedSlots).includes('cont-'+headerItem.attr) || Object.keys($slots).includes('cont-'+headerItem.attr)"
:name="'cont-'+ headerItem.attr" :row="row"></slot>
<template v-else>
<!-- 是否多个字段的处理 -->
<template v-if="typeof(headerItem.prop) === 'object'">
<p v-for="(k, kIndex) in headerItem.prop" :key="kIndex">
{{row[k] === '' ? '-' : row[k]}}
</p>
</template>
<!-- 单个字段的处理 -->
<template v-else>{{row[headerItem.prop] === '' ? '-' : row[headerItem.prop]}}</template>
</template>
</template>
</el-table-column>
<!-- <el-table-column v-else :label="headerItem.label" :width="headerItem.width" :prop="headerItem.prop" :key="headerItem.prop" :show-overflow-tooltip="true"> -->
<!-- </el-table-column> -->
</el-table>
</div>
</template>
<script>
export default {
props:{
// 表格数据
tableData: {
type: Array,
required: true
},
// 表格表头
headerColumns:{
type: Array,
required: true
},
// 表格的高度 element只要添加高度即可实现固定表头的表格，而不需要额外的代码。
sendHeight: {
type: Number,
default: 0
},
// stripe属性可以创建带斑马纹的表格
stripe: {
type: Blob,
},
// 表格高度是否自适应
isNewAutoHeight: false,
},
watch: {
// 监听表格高度监听
sendHeight: {
handler (newVal, oldVal) {
if(newVal){
this.sendHeight = newVal
}else{
this.sendHeight =''
}
},
immediate: true,
deep: true
},
// 表格高度是否自适应
isAutoHeight: {
handler (newVal, oldVal) {
this.isNewAutoHeight = newVal
},
immediate: true,
deep: true
},
},
data() {
return {
// border属性,它接受一个Boolean,设置为true即可启用
border:true,
// 多选或单选的th表头数据
checkeBoxTh: {},
headerRowNewObj: {
// 头部背景
background: '#eaf9f9',
// 关部文字颜色
color: '#478995',
// 表格样式内容 cell_style差不多
row_style:{},
// 表格头部样式
header_style:{background:'f5f7fa ', 'text-align':'',cursor:'pointer',height:'50px'},
// 表格内容样式
cell_style:{padding:'0px',cursor:'pointer',height:'50px'}
},
}
},
created () {
if (this.headerColumns[0] && (this.headerColumns[0].type === 'checkbox' || this.headerColumns[0].type === 'radio'||this.headerColumns[0].type === 'selection') && this.headerColumns[0].show) {
this.checkeBoxTh = this.headerColumns.shift()
}
},
mounted(){
},
methods:{
// 勾选全选 Checkbox 时触发的事件
checkboxAll(val){
this.$emit('checkboxAll',val)
},
// Checkbox发生变化时会触发该事件
checkboxChange(val){
this.$emit('checkboxChange',val)
},
// 多选表格，调用此方法可清空用户的选择
clearSelection(){
this.$refs.wptable.clearSelection();
},
// 单机单元格触发该事件
cellClick(val){
this.$emit('cellClick',val)
},
// 双击单元格触发该事件
cellDblclick(val){
this.$emit('cellDblclick',val)
},
//当表格某一行点击时触发事件
rowClick(val){
this.$emit('rowClick',val)
},
// 当表格切换出现塌陷或者央视错误可调用此方法
doLayout(){
this.$nextTick(()=>{
this.$refs.wptable.doLayout()
})
},
// 当表格需要默认选中可调用此方法
toggleRowSelection(obj,Boole){
this.$nextTick(()=>{
this.$refs.wptable.toggleRowSelection(obj,Boole);
})
},
// row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
tableRowClassName({row, rowIndex}){
this.$emit('tableRowClassName',{row, rowIndex})
},
}
}
</script>
<style scoped lang="less" rel="stylesheet/less">
@import "../../common/less/base";
</style>
