行业知识
el-table组件二次封装，支持多选，单选带checkbox，初始化默认选中，分页功能
���组件引用：
（）import tableComponent from "./newTable"
table组件：
//引用组件时请仔细查看props中必填字段：
// data,columns,showLoading
export default {
name: "tableComponent",
props: {
data: {
required: true,
type: Array,
default: () => {return []}
},
columns: {
//type == "radio"表示单选，type == 'selection'表示多选
required: true,
type: Array,
default: () => {return []}
},
showLoading: {
//表格loading，用于判断数据是否加载完，需在获取到后台数据之后再设置为false，还控制分页是否展示
required: true,
type: Boolean,
default: () => {return true}
},
tableHeight: {
required: false,
type: String,
},
selectedList: {
//被选中数据list
required: false,
type: Array,
default: () => {return []}
},
pagination: {
//分页
required: false,
type: Object,
default: () => {return {
PageIndex: 1,
PageSize: 10,
Total: 0
}}
},
showPagination: {
//分页
required: false,
type: Boolean,
default: () => {return true}
},
onlyKey: {
// 唯一id，用于选中表格
required: false,
type: String,
default: () => {return 'Id'},
},
isNeedCheck: {
// 判断是否需要默认选中数据，例：选人，选组织，选文档组件
required: false,
type: Boolean,
default: () => {return false}
},
deleteChangeId: {
// 右边删除按钮id，用于选中表格
required: false,
type: String,
default: () => {return ""}
},
},
data() {
return {
isHaveRadio: false, //是否有单选框
}
},
created() {
if(this.columns.some((obj)=>{return obj.type == "radio"})) {
this.isHaveRadio = true
}
},
watch: {
//弹窗消失，表示数据更新
showLoading: {
handler(newV, oldV) {
if(!newV && this.isNeedCheck) {
this.initSelectedRow()
}
},
immediate: true,
deep: true,
},
deleteChangeId: {
// 右边手动触发删除
handler(newV, oldV) {
if(newV != "") {
this.deleteChangeIdFun(newV)
}
},
immediate: true,
deep: true,
},
},
methods: {
initSelectedRow() {
this.$nextTick(function(){
if(this.selectedList.length > 0) {
this.selectedList.forEach(item => {
this.data.forEach(temp => {
if(item[this.onlyKey] == temp[this.onlyKey]) {
this.$set(temp,'checked',true)
this.$refs.multipleTable.toggleRowSelection(temp,true)
}
})
})
}else {
if(this.data.length > 0) {
this.data.forEach(item => {
this.$set(item,'checked',false)
this.$refs.multipleTable.toggleRowSelection(item,false)
})
}
}
})
},
getCurrentRow(row) {
this.data.forEach(item => {
item.checked = false
this.$refs.multipleTable.toggleRowSelection(item,false)
})
row.checked = true
this.$refs.multipleTable.toggleRowSelection(row,true)
},
handleCurrentChange(val) {
if(val==null) {
return;
}
if(val.disable) {
this.$emit("disableClick")
return;
}
if(!this.isHaveRadio) {
if(val.checked) {
val.checked = false
this.$refs.multipleTable.toggleRowSelection(val,false)
}else {
val.checked = true
this.$refs.multipleTable.toggleRowSelection(val,true)
}
return;
}
if(!val.checked && this.isHaveRadio) {
this.data.forEach(item => {
console.log(333,this.onlyKey)
this.$set(item,'checked',false)
this.$refs.multipleTable.toggleRowSelection(item,false)
if(item[this.onlyKey] == val[this.onlyKey]) {
this.$set(item,'checked',true)
this.$refs.multipleTable.toggleRowSelection(item,true)
}
})
this.$forceUpdate()
}
//如果有单选框，数据进行转换，去掉添加的是否选中参数“checked”
let obj = this.radioDataChange(val)
this.$emit("handleCurrentChange",obj)
},
handleSelectionChange(val) {
this.$emit("handleSelectionChange",val)
},
radioDataChange(val) {
if(this.isHaveRadio) {
let obj = Object.assign ({},val)
delete obj.checked
return obj
}else {
return val
}
},
selectEnable(row, rowIndex) {
if (!row.disable) {
return true
}
},
deleteChangeIdFun(key) {
this.data.forEach(item => {
if(item[this.onlyKey] == key) {
this.$set(item,'checked',false)
this.$refs.multipleTable.toggleRowSelection(item,false)
}
})
},
handlePageChange(PageIndex) {
this.$emit("paginationChange",PageIndex)
},
},
}
/deep/.el-pagination {
text-align: center;
margin-top: 20px;
}
上一篇：改配服务器网卡怎么设置?
下一篇：wnte怎么读音?
