标签：封装 表格 elementui tableChooseData tableData item key id row
<template>
<div id="commonTable">
<div class="common_table">
<el-table
:data="tableData"
ref="multipleTable"
v-loading="loading"
border
style="width: 100%"
:default-sort="{ prop: 'date', order: 'descending' }"
:row-style="{ height: `${height}` }"
:header-row-style="{ height: '54px' }"
:cell-style="{ padding: '1px' }"
@selection-change="checkedBoxChange"
@select="selectChange"
@select-all="checkedAllChange"
@sort-change="sortChange"
:highlight-current-row="ishighlight ? true : false"
:row-key="getRowKeys"
@current-change="handleCurrentChange"
@row-click="toggleSelection"
@cell-click="handlerFolder"
>
<!-- 多选框 -->
<el-table-column
v-if="isSelection"
:width="48"
type="selection"
align="center"
:selectable="disabledLine"
:reserve-selection="true"
fixed
></el-table-column>
<!-- 单选框 -->
<el-table-column v-if="isRadio" :width="48">
<template slot-scope="{ row }">
<el-radio v-model="radioChecked" :label="row.id" @click.native.stop="cardRadionChange(row)"><span></span></el-radio>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in tableHeard"
:key="'table' + index"
:prop="item.key"
:label="item.title"
:width="item.width"
:min-width="item.minWidth"
:sortable="!item.noSortable"
:align="item.align"
:show-overflow-tooltip="true"
:style="{ 'padding-left': isSelection ? 0 : '10px' }"
>
<template slot-scope="{row,$index}">
<template v-if="row.isFolder&&item.key=='fileName'">
<!-- @click.stop="openFolder(row)"-->
<img src="@/assets/folder.png" >
</template>
<!-- 当前是操作项时循环操作按钮数据start -->
<template v-if="item.key == 'action'">
<div v-if="item.btnArray && item.btnArray.length > 0">
<template v-for="(btn, b) in item.btnArray">
<template v-if="btn.isCanSelect">
<!-- 如果操作按钮存在显示条件时显示 -->
<template v-if="btn.isShowState == row[btn.state] || btn.isShowState != row.isFolder">
<!-- 如果当前给的状态和数据状态一致则展示 -->
<span :key="b" v-if="b < 3">
<span @click.stop="btn.clickFun(row)" v-html="btn.html"></span>
</span>
</template>
</template>
<template v-else>
<span :key="b" v-if="b < 3">
<span @click.stop="btn.clickFun(row)" v-html="btn.html"></span>
</span>
</template>
</template>
<span v-if="item.btnArray.length > 3" class="action_icon el-icon-more">
<div class="hover_box">
<template v-for="(btn, b) in item.btnArray">
<div :key="b" v-if="b >= 2" class="hover_item" v-html="btn.html"></div>
</template>
</div>
</span>
</div>
</template>
<!-- 当前是操作项时循环操作按钮数据end -->
<div @click
class="ellipsis-1"
:style="{ maxWidth: (item.width || item.minWidth) - 20 + 'px' }"
v-else
>
<template v-if="item.scopedSlots" >
<slot :name="item.scopedSlots" v-bind="{row,index:$index}"></slot>
</template>
<template v-else>
<!-- 如果当前有Switch按钮 -->
<template v-if="item.isSwitch">
<el-switch
v-model="row.isShare"
active-text=""
active-color="#1890FF"
inactive-color="#CCCCCC"
@change="changeSwitch($event, row)"
/>
<span v-if="!row.isShare & item.isOrderPerson" class="ml-10">不分享</span>
<span
v-else-if="row.isShare & item.isOrderPerson"
class="text_btn" style="margin-left: 10px;"
@click.stop="specifyObject(row)"
>指定对象</span
>
</template>
<template v-else>
<!-- 是否给当前添加样式 -->
<template v-if="item.newStyle">
<span v-if="item.formatData" :style="row[item.key] | formatters(item.newStyle)">{{
row[item.key] && row[item.key].length > 10
? row[item.key].substring(0, 10) + '...'
: row[item.key] | formatters(item.formatData)
}}</span>
<span v-else :style="item.newStyle">{{ row[item.key] }}</span>
</template>
<template v-else>
<span v-if="item.formatData">{{
row[item.key] && row[item.key].length > 10
? row[item.key].substring(0, 10) + '...'
: row[item.key] | formatters(item.formatData)
}}</span>
<!-- <span v-else >{{ row[item.key]&&row[item.key].length>10?row[item.key].substring(0,10)+'...':row[item.key] }}</span> -->
<span v-else :style="{color:(item.color || '#666')}">{{ row[item.key] }}</span>
</template>
</template>
</template>
</div>
</template>
</el-table-column>
<!-- 操作项插槽 -->
<slot name="detail"></slot>
<slot name="action"></slot>
</el-table>
</div>
</div>
</template>
<script>
import { stringIsEmpty } from '@/utils'
export default {
props: {
height:{
type: String,
default: '40px'
},
isSend: {
type: Boolean,
default: false
},
// 表格表头
tableHeard: {
type: Array,
default: []
},
// 表格数据
tableData: {
type: Array,
default: []
},
//是否显示表格单选按钮
isRadio: {
type: Boolean,
default: false
},
//单选按钮的默认选中的ID
radioDefaultId:{
type:String,
default:''
},
// 是否显示表格复选框
isSelection: {
type: Boolean,
default: false
},
loading: {
// 加载等待
type: Boolean,
default: false
},
// 是否高亮选中
ishighlight: {
type: Boolean,
default: false
},
isSendData: {
type: Boolean,
default: false
}
},
filters: {
// now为当前值 change为想要转换的值
formatters: function (now, change) {
let stateName = change(now)
return stateName
}
},
watch: {
tableData() {
this.isChange = !this.isChange
}
},
data() {
return {
isSelectAll: false,
isChange: false,
radioChecked:'',//单选按钮选中的ID
}
},
mounted(){
//单选按钮的默认选中
if(this.isRadio){
this.radioChecked = this.radioDefaultId || '';
}
},
methods: {
//单选按钮选择时间
cardRadionChange(row) {
this.radioChecked = row.id;
this.$emit('radioChange',row);
},
stateFormat(row, column, cellValue, index) {
if (!cellValue) return ''
if (cellValue.length > 10) {
//最长固定显示10个字符
return cellValue.slice(0, 10) + '...'
}
return cellValue
},
/**
* 禁止选择默认选项
*/
disabledLine(row) {
return row.isCreator != 0
},
/**
*
*/
toggleSelection(item) {
if(item.isCreator != 0){
this.radioChecked = item.id
this.$refs.multipleTable.toggleRowSelection(item)
if(this.isRadio){
this.$emit('radioChange',item);
}
}
},
getRowKeys(row) {
return row.id
},
/**
* 选择模块
*/
checkedAllChange(val) {},
selectChange(row){
console.log('select',row)
},
// 选择框选择事件
checkedBoxChange(row) {
// 获取当前选择的所以数据
this.checkedData = row
this.$emit('getCheckedData', this.checkedData)
},
// 排序切换
sortChange({ column, prop, order }) {
// order值 ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
var sort = '' // 0降序 1升序
if (order == 'ascending') {
sort = '1'
} else if (order == 'descending') {
sort = '0'
} else {
sort = ''
}
let obj = { prop, sort }
this.$emit('getSortType', obj)
},
// switch切换事件
changeSwitch(e, item) {
// if (item.questionId) {
let obj = {
switchSelect: e,
rowData: item
}
this.$emit('switchTab', obj)
// }
},
// 点击表格栏单选事件
handleCurrentChange(row) {
if (this.ishighlight) {
this.$emit('chooseRowData', row)
}
},
// 点击指定对象
specifyObject(row) {
this.$emit('specifyObject', row)
},
//打开文件夹
handlerFolder(row,column,event,cell){
if(row.isFolder){
this.$emit("openFolder",row,1)
}
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .common_table .el-table .cell {
padding: 0 0 0 20px !important;
}
.cell.el-tooltip{
img{
width:17px;
height:15px;
margin-right:5px;
vertical-align: -1px;
cursor: pointer;
}
}
::v-deep .cell.el-tooltip{
display: flex;
align-items: center;
width:100%;
}
.ellipsis-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
.common_table /deep/ .el-switch__label {
color: #1890ff;
}
.hover_box {
display: none;
position: absolute;
width: 105px;
left: 0;
top: 28px;
background: #fff;
z-index: 9999;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
.hover_item {
color: rgba(0, 0, 0, 0.65);
font-size: 12px;
width: 100%;
height: 30px;
line-height: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
&:last-of-type {
border: none;
}
}
}
</style>
------------------------------------------------------------------------------------------------
<!-- 数据表格 -->
<CommonTable
v-if="tableData.length > 0"
ref="parentsRef"
:isSelection="true"
:tableData="tableData"
:tableHeard="tableHeard"
@getCheckedData="getCheckedData"
>
</CommonTable>
------------------------------------------------------------------
//获取表格选中的数据
getCheckedData(data){
let pageArr = this.tableData.map(item => item.id);
//在选中数据中过滤掉当前页
this.tableChooseData = this.tableChooseData.filter(item => !pageArr.includes(item.id))
// 在返回的Data中筛选出当前页面数据
data = data.filter(item => pageArr.includes(item.id))
this.tableChooseData = [...this.tableChooseData,...data]
},
// 获取教师信息数据
getMajorByPage() {
let data = {
deptId: this.departmentId,
pageNum: this.nowPage,
pageSize: this.pageShow,
param: this.searchParam
}
// deptId
getMajorByPage(data).then(res => {
let tableData = res.data.records || []
tableData.forEach(item=> {
item.abbreviation = item.abbreviation || item.name;
/*
* 把tableData和tableChooseData两个数组里面ID相同的对象的引用类型指向全部换到tableData里面对应对象的引用地址
* */
this.tableChooseData.forEach((itemIn,indexIn )=> {
if(itemIn.id == item.id){
this.$set(this.tableChooseData,indexIn,item)
}
})
})
this.totalNum = res.data.total
this.tableData = tableData
setTimeout(() => {
if (this.tableChooseData.length > 0 && tableData.length > 0) {
let teacherListData = this.tableChooseData
tableData.forEach((mt, ix) => {
teacherListData.forEach((item, index) => {
if (mt.id == item.id) {
this.$refs.parentsRef.$refs.multipleTable.toggleRowSelection(mt, true)
}
})
})
}
}, 10)
})
},
// 获取当前表格勾选的项
getCheckedData(data) {
let pageArr = this.tableData.map(item => item.id);
//在选中数据中过滤掉当前页
this.tableChooseData = this.tableChooseData.filter(item => !pageArr.includes(item.id))
// 在返回的Data中筛选出当前页面数据
data = data.filter(item => pageArr.includes(item.id))
this.tableChooseData = [...this.tableChooseData,...data]
},
// 点击底部已选择的x取消表格的勾选
removeTableChoose(row) {
console.log(row)
if (row.id) {
this.$nextTick(() => {
this.tableChooseData = this.tableChooseData.filter(item => item.id != row.id)
this.$refs.parentsRef.$refs.multipleTable.toggleRowSelection(row, false)
})
} else {
this.$nextTick(() => {
this.tableChooseData = [];
this.$refs.parentsRef.$refs.multipleTable.clearSelection()
})
}
},
标签：封装,
表格,
elementui,
tableChooseData,
tableData,
item,
key,
id,
row
From： https://www.cnblogs.com/connie256/p/17070934.html