|
1、引用element的tab标签页和checkbox复选框
{{ items.AssetName }}
全选
复制代码
大致层次结构如图：
2、处理接口数据
//（1）在调用接口的方法外，创建接收数据的变量
let dataObjects = ref([])
let dataListObjiects = ref([])
let tabList = ref([])
// (2)发起请求，获得数据
function 方法名() {
$http({
url: 接口,
method:"post",
data:接口上传数据
})
.then((data) => {
if(接口请求成功){
// (3)处理数据
let dataList = data.list
let resultList = []
dataList.forEach((item,index)=>{
let result = ...... //数据处理
item.tabName = result //在数据中创建一个全新的值，用来接收处理后的数据
item.Pnumber = index //在数据中创建一个全新的值，用来接收索引，以给每一个数据一个独一无二的值
resultList.push(result) //将处理后的数据放入准备好的空数组中
})
// 数据去重
for(let i=0;i {
dataObjects.value = [] // tab标签页切换时，tab标签数据清空
dataListObjects.value.forEach(item => {
if(tab.paneName=="全部分类"){ //当激活的tab标签是“全部分类”时
dataObjects.value = dataListObjects.value //所有选项
}else if(item.tabName ==tab.paneName ){
dataObjects.value.push(item) //选取属于所激活标签页的选项，添加进入v-for循环的数组当中
}
})
//全选是否勾上
changeList()
})
复制代码
4、全选
// 选中的数据文件对象，决定各tab标签页下的各选项是否勾选
let checkedDataObjects = ref([])
// 所有被选中的数据
const ischeckedList = ref([])
// 全选框选中状态的回调
function handleCheckAllChange(value) {
if(value){
// 当全选按钮勾上时，将该tab标签页下的选项全部添加到“所有被选中的数据”中
dataObject.value.forEach(item => {
ischeckedList.value.push(item)
})
}else{
// 当全选按钮取消勾选时，将该tab标签页下的选项从“所有被选中的数据”中删除
dataObjects.value.forEach(item => {
let y = ischeckedList.value.indexOf(item)
if(y>-1){
ischeckedList.value.splice(y,1)
}
})
}
//各标签页需要勾选的数据，即当前页面取消全选，其他页面的勾选情况不影响
checkedDataObjects.value = ischeckedList.value
}
复制代码
5、其他复选框选中状态的回调
// 数据文件对象的全选
let checkAll = ref(false)
function handleCheckedDataObjectsChange(value) {
// value是checkedDataObjiects收集到的label数据
let checkedCount = value.length
// 将已勾选的数据赋给ischeckedList
ischeckedList.value = value
// 当选中的数据等于所有的数据的时候，全选框勾上
checkAll.value = checkedCount === dataObjects.value.length
// 调用changeList方法
changeList()
}
复制代码
6、tab标签页下的复选框与全选框的关联
// 当每个tabs标签页下的复选框全部选中时，全选按钮自动勾选
const changeList = () =>{
// 设置一个用来判断的参数变量
let x = 0
for(let i=0;i |