vue3+element-plus多选框全选与单选

一、父组件代码：

</div>

</template>

import StockCollect from '@/views/personal-center/components/stockCollect.vue'

</script>

.bottom-box {

margin: 0 20px;

}

</style>

二、子组件代码：

<div

class="add-btn"

:style="{

cursor: isAdmin && route.query.userId ? 'no-drop' : 'pointer'

@click="isAdmin && route.query.userId ? '' : showAddDialog()"

添加股票收藏

</div>

<el-input

v-model="searchVal"

:maxlength="6"

placeholder="请输入股票关键字或代码"

clearable

class="ipt"

</div>

<div

class="check-top"

v-if="collectStockList && collectStockList.length > 0"

<el-checkbox

v-model="checkAll"

:disabled="isAdmin && route.query.userId ? true : false"

:indeterminate="isIndeterminate"

@change="checkAllChange"

class="select-name"

全选

</el-checkbox>

<div

class="delete-btn"

:style="{

cursor: isAdmin && route.query.userId ? 'no-drop' : 'pointer'

@click="isAdmin && route.query.userId ? '' : deleteStock()"

删除

</div>

<el-checkbox-group

v-model="checkedStockList"

@change="checkedChange"

:disabled="isAdmin && route.query.userId ? true : false"

class="check-list"

v-if="collectStockList && collectStockList.length > 0"

<el-checkbox

v-for="item in collectStockList"

:key="item.companyId"

:value="item.companyId"

:label="item.companyId"

class="stock-check"

{{ item.companyName }} [{{ item.symbol }}]

</el-checkbox>

</el-checkbox-group>

<div class="nodata" v-else>暂无收藏的股票</div>

</div>

<stock-check

:dialog-visible="stockCheckVisible"

:title="stockTitle"

:data-list="dataList"

:current-index="currentIndex"

:loading="loading"

@current-index-change="currentIndexChange"

@cancel="stockCheckCancel"

@summit="stockCheckSummit"

</div>

</template>

import { ElMessage, ElMessageBox } from 'element-plus'

import StockCheck from '@/components/StockCheck.vue'

import {

queryUserCollectCompany,

queryUserCompanyTypeDto,

delUserCollectCompany,

addUserCollectCompany,

adminCheckStockList

} from '@/service/stockIndex/index'

const route = useRoute()

const stockCheckVisible = ref(false) // 添加股票弹框

//弹窗title

const stockTitle = ref('添加股票收藏')

const checkAll = ref(false) // 是否全选

const isIndeterminate = ref(false) // 全选中状态

const checkedStockList = ref<any>([]) // 选中的股票列表

const collectStockList = ref<any>([]) // 收藏的股票列表

//添加或编辑账号的所有股票列表数据

const dataList = ref<any>([])

const searchVal = ref<any>('') // 搜索框的值

const isAdmin = ref(false) // 是否管理员

const userInfo = ref<any>({}) // 用户信息

//0 地区分类 1交易所分类

const currentIndex = ref(0)

//弹窗数据请求loading

const loading = ref(false)

// 全选

const checkAllChange = (val: any) => {

let arr: number[] = []

collectStockList.value.forEach((v: any) => {

v.checked = val

arr.push(v.companyId)

})

checkedStockList.value = val ? arr : []

isIndeterminate.value = false

}

// 单个股票勾选

const checkedChange = (value: any) => {

collectStockList.value.forEach((v: any) => {

v.checked = value.includes(v.companyId)

})

const checkedCount = collectStockList.value.filter(

(v: any) => v.checked

).length

checkAll.value = collectStockList.value.every((dto: any) => dto.checked)

isIndeterminate.value =

checkedCount > 0 && checkedCount < collectStockList.value.length

}

// 显示添加弹框

const showAddDialog = () => {

stockCheckVisible.value = true

checkAll.value = false

isIndeterminate.value = false

checkedStockList.value = []

getcheckDataList()

}

// 删除收藏的股票

const deleteStock = () => {

if (checkedStockList.value.length === 0) {

ElMessage({

type: 'error',

message: '请选择要删除的股票'

})

} else {

ElMessageBox.confirm('确认删除选中的股票？', '提示', {

confirmButtonText: '确认',

cancelButtonText: '取消',

autofocus: false,

cancelButtonClass: 'cancle-btn',

type: 'warning'

})

.then(() => {

delUserCollectCompany(

checkAll.value ? [] : checkedStockList.value,

checkAll.value ? 1 : 0

).then((res: any) => {

if (res.code === 200) {

getUserCollectCompany()

checkedStockList.value = []

checkAll.value = false

isIndeterminate.value = false

}

ElMessage({

type: res.code === 200 ? 'success' : 'error',

message: res.code === 200 ? '删除成功' : res.message

})

.catch(() => {})

}

//取消添加股票

const stockCheckCancel = () => {

//tab切换置为初始值

currentIndex.value = 0

stockCheckVisible.value = false

}

//确定添加股票

const stockCheckSummit = (companyIds: number[], isAll: number) => {

addUserCollectCompany(companyIds, isAll).then((res: any) => {

if (res.code === 200) {

stockCheckCancel()

getUserCollectCompany()

}

ElMessage({

type: res.code === 200 ? 'success' : 'error',

message: res.code === 200 ? '保存成功' : res.message

})

}

//子组件内tab切换

const currentIndexChange = (index: number) => {

currentIndex.value = index

getcheckDataList()

}

// 搜索股票列表

const searchUserCollectCompany = () => {

checkAll.value = false

isIndeterminate.value = false

checkedStockList.value = []

getUserCollectCompany()

}

// 获取用户收藏的股票列表

const getUserCollectCompany = () => {

loading.value = true

dataList.value = []

let userId: string = ''

queryUserCollectCompany(userId, searchVal.value.trim()).then((res: any) => {

if (res.code === 200) {

collectStockList.value = res.data

} else {

ElMessage({

type: 'error',

message: res.message

})

}

loading.value = false

})

}

// 管理员查看用户收藏股票列表

const getAdminCheckStockList = () => {

loading.value = true

dataList.value = []

adminCheckStockList(route.query.userId ? route.query.userId : '').then(

(res: any) => {

if (res.code === 200) {

collectStockList.value = res.data

} else {

ElMessage({

type: 'error',

message: res.message

})

}

loading.value = false

}

)

}

// 获取地区、交易所分类数据

const getcheckDataList = () => {

loading.value = true

dataList.value = []

queryUserCompanyTypeDto(

route.query.userId ? route.query.userId : '',

currentIndex.value

).then((res: any) => {

if (res.code === 200) {

let subData: any[] = []

res.data.forEach((v: any) => {

subData = [...subData, ...v.userCompanyCheckedDtoList]

})

const allData: any[] = [

{

typeName: '全部',

userCompanyCheckedDtoList: subData

}

]

dataList.value = [...allData, ...res.data]

} else {

ElMessage({

type: 'error',

message: res.message

})

}

loading.value = false

})

}

onMounted(() => {

nextTick(() => {

let info: any = localStorage.getItem('userInfo')

userInfo.value = JSON.parse(info)

isAdmin.value = userInfo.value.admin

if (isAdmin.value && route.query.userId) {

getAdminCheckStockList()

} else {

getUserCollectCompany()

}

})

</script>

.stock-collect {

margin: 20px 0 0;

.top-box {

display: flex;

align-items: center;

justify-content: space-between;

.add-btn {

width: 120px;

height: 30px;

border-radius: 4px;

border: 1px solid #3a5bb7;

display: flex;

align-items: center;

justify-content: center;

font-size: 14px;

color: #3a5bb7;

cursor: pointer;

}

.right-box {

display: flex;

align-items: center;

.ipt {

width: 280px;

margin-left: 14px;

font-size: 12px;

}

.search-btn {

width: 60px;

display: flex;

justify-content: center;

align-items: center;

height: 32px;

background-color: #3a5bb7;

border-radius: 4px;

color: #ffffff;

margin-left: 14px;

font-size: 12px;

cursor: pointer;

}

.stock-list {

margin: 25px 0;

.check-top {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 13px;

.delete-btn {

width: 64px;

height: 30px;

border-radius: 4px;

border: 1px solid #3a5bb7;

cursor: pointer;

font-size: 14px;

color: #3a5bb7;

float: right;

display: flex;

align-items: center;

justify-content: center;

}

.nodata {

font-size: 14px;

color: #666666;

display: flex;

justify-content: center;

align-items: center;

}

.stock-check {

margin-bottom: 10px;

margin-right: 45px;

}

.check-list {

max-height: 325px;

overflow-y: auto;

}

.el-checkbox {

--el-checkbox-checked-input-border-color: @text-blue;

--el-checkbox-checked-bg-color: @text-blue;

--el-checkbox-input-border-color-hover: @text-blue;

:deep(.el-checkbox__label) {

padding-left: 10px;

margin-left: 10px;

width: 210px;

height: 30px;

line-height: 30px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

color: #666666;

background: #f5f8fc;

}

&.select-name {

:deep(.el-checkbox__label) {

height: 24px;

line-height: 24px;

font-weight: bold;

color: #333333;

background: transparent;

}

&.is-checked {

:deep(.el-checkbox__label) {

color: @text-blue;

}

&:nth-of-type(5n) {

margin-right: 0;

}

</style>

三、StockCheck组件代码：

<el-dialog

:model-value="dialogVisible"

:title="title"

:width="width"

class="stock-check-dialog"

append-to-body

@close="cancle"

<el-input

v-model.trim="accInput"

placeholder="请输入账号"

class="acc-input"

:disabled="!!editRow"

clearable

maxlength="10"

></el-input>

</div>

<li

v-for="(item, index) in tabList"

:key="index"

:class="['item', currentIndex === index ? 'active' : '']"

@click="tabClick(index)"

</li>

</ul>

<el-input

v-model.trim="searchInput"

maxlength="20"

style="width: 200px"

placeholder="请输入股票关键字或代码"

size="small"

clearable

@change="searchKeyChange"

<el-icon class="cur-p"><Search /></el-icon>

</template>

</el-input>

</div>

<ul>

<li

:class="[

'type-item',

typeName === item.typeName ? 'active-name' : ''

v-for="(item, index) in dataList"

:key="index"

@click="typeNameChange(item.typeName)"

</li>

</ul>

</div>

<el-checkbox

v-show="subDataList.length"

v-model="checkAll"

:indeterminate="isIndeterminate"

@change="handleCheckAllChange"

>全选</el-checkbox

<el-checkbox-group

v-model="checkedStocks"

@change="handleCheckedStocksChange"

<el-checkbox

v-for="item in subDataList"

:key="item.companyId"

:value="item.companyId"

:label="item.companyId"

:checked="item.checked"

size="large"

{{ `${item.companyName} [${item.symbol}]` }}

</el-checkbox>

</el-checkbox-group>

</div>

</template>

</div>

</template>

</div>

<el-button class="cancle-btn" @click="cancle">取消</el-button>

<el-button @click="submit" type="primary"> 提交</el-button>

</div>

</template>

</el-dialog>

</template>

import type {

UserCompanyTypeVO,

UserCompanyCheckedVO,

AccountManagementVO

} from '@/types'

import { Search } from '@element-plus/icons-vue'

import { ElMessage } from 'element-plus'

import Common from '@/utils/common'

const props = defineProps({

//弹窗显示隐藏

dialogVisible: {

type: Boolean,

default: false

//添加账户页面使用 - 标识类型

type: {

type: String,

default: ''

//数据请求loading

loading: {

type: Boolean,

default: false

//弹窗title

title: {

type: String,

default: ''

//弹窗宽度

width: {

type: String,

default: '1100px'

//tab切换数据

tabList: {

type: Array,

default: () => {

return [

{ label: '地区分类', value: 0 },

{ label: '交易所分类', value: 1 }

]

}

//当前选择tab

currentIndex: {

type: Number,

default: 0

//全部数据

dataList: {

type: Array as () => UserCompanyTypeVO[],

default: () => []

//账户信息

editRow: {

type: Object as () => AccountManagementVO | null,

default: () => null

}

})

const emits = defineEmits(['cancel', 'summit', 'currentIndexChange'])

const { dialogVisible, dataList, currentIndex, editRow, type } = toRefs(props)

const rightScrollRef = ref()

const leftScrollRef = ref()

//选择的地区、交易所分类名称

const typeName = ref('')

//全选按钮

const checkAll = ref(false)

//是否开启半选

const isIndeterminate = ref(false)

//勾选的数据

const checkedStocks = ref<number[]>([])

//搜索关键字 - change方法触发赋值

const searchKey = ref('')

//搜索关键字 - 输入的值

const searchInput = ref('')

//账号输入

const accInput = ref('')

//左侧类型下的子数据

const subDataList = computed<UserCompanyCheckedVO[]>(() => {

const filteredList = dataList.value.filter(

(v: UserCompanyTypeVO) => v.typeName === typeName.value

)

let data: UserCompanyCheckedVO[] = []

if (filteredList.length > 0) {

data = filteredList[0].userCompanyCheckedDtoList.filter(

(v: UserCompanyCheckedVO) =>

v.symbol.includes(searchKey.value) ||

v.companyName.includes(searchKey.value)

)

}

return data

})

watch(

() => dataList.value,

(val) => {

if (val.length) {

typeName.value = val[0].typeName

}

)

watch(

() => dialogVisible.value,

(val) => {

if (!val) {

typeName.value = ''

searchKey.value = ''

searchInput.value = ''

accInput.value = ''

resetCheckValue()

rightScrollRef.value && rightScrollRef.value.scrollTo({ top: 0 })

leftScrollRef.value && leftScrollRef.value.scrollTo({ top: 0 })

} else {

//编辑时给账号赋值

accInput.value = editRow?.value?.accountName ?? ''

}

)

// 使用 watch 来观察 subDataList 的变化

watch(subDataList, (newSubDataList) => {

checkAll.value = newSubDataList.every(

(dto: UserCompanyCheckedVO) => dto.checked

)

const checkedCount = newSubDataList.filter(

(v: UserCompanyCheckedVO) => v.checked

).length

isIndeterminate.value =

checkedCount > 0 && checkedCount < newSubDataList.length

})

//回车或搜索点击

const searchKeyChange = () => {

searchKey.value = searchInput.value

typeName.value = dataList.value[0].typeName

}

//点击全选

const handleCheckAllChange = (val: boolean) => {

let arr: number[] = []

subDataList.value.forEach((v: UserCompanyCheckedVO) => {

v.checked = val

arr.push(v.companyId)

})

checkedStocks.value = val ? arr : []

isIndeterminate.value = false

}

//单选

const handleCheckedStocksChange = (value: number[]) => {

subDataList.value.forEach((v: UserCompanyCheckedVO) => {

v.checked = value.includes(v.companyId)

})

const checkedCount = subDataList.value.filter(

(v: UserCompanyCheckedVO) => v.checked

).length

checkAll.value = subDataList.value.every(

(dto: UserCompanyCheckedVO) => dto.checked

)

isIndeterminate.value =

checkedCount > 0 && checkedCount < subDataList.value.length

}

//类型名称切换

const typeNameChange = (name: string) => {

if (typeName.value === name) return

typeName.value = name

rightScrollRef.value && rightScrollRef.value.scrollTo({ top: 0 })

}

//转换类型名称

const getTypeName = (name: string) => {

let showName = name

if (currentIndex.value === 1) {

switch (name) {

case 'BSE':

showName = '北交所'

break

case 'SSE':

showName = '上交所'

break

case 'SZSE':

showName = '深交所'

break

default:

break

}

return showName

}

//确定

const submit = () => {

//处理跨tab选择数据 (因为出现了跨tab勾选情况，所以不能使用checkedStocks，checkedStocks只是起到当前页面勾选数据效果)

//data 全部数据

const data: UserCompanyTypeVO = dataList.value.filter(

(v: UserCompanyTypeVO, index: number) => index === 0

)[0]

let selectCompanyIds: number[] = []

data.userCompanyCheckedDtoList.forEach((v: UserCompanyCheckedVO) => {

v.checked && selectCompanyIds.push(v.companyId)

})

const isAll =

selectCompanyIds.length === data.userCompanyCheckedDtoList.length ? 1 : 0

if (type.value === 'addAccount') {

if (!accInput.value) {

ElMessage({

type: 'error',

message: '请输入账号'

})

return

} else {

if (!Common.isValidAlphanumeric(accInput.value)) {

ElMessage({

type: 'error',

message: '账号请输入字母或数字'

})

return

}

if (selectCompanyIds.length === 0) {

ElMessage({

type: 'error',

message: '请先勾选数据'

})

return

}

emits('summit', selectCompanyIds, isAll, accInput.value)

}

//取消

const cancle = () => {

emits('cancel')

}

//tab切换

const tabClick = (index: number) => {

if (currentIndex.value === index) return

emits('currentIndexChange', index)

typeName.value = ''

searchKey.value = ''

searchInput.value = ''

resetCheckValue()

}

//重置选择

const resetCheckValue = () => {

checkAll.value = false

isIndeterminate.value = false

checkedStocks.value = []

}

</script>

.stock-check-content {

background-color: #f4f7fc;

font-size: 14px;

.acc-input-box {

height: 70px;

background: #ffffff;

padding: 17px 30px;

box-sizing: border-box;

.acc-input {

width: 300px;

height: 36px;

background: #ffffff;

border-radius: 2px;

//border: 1px solid #e5e7ee;

margin-left: 10px;

}

.flex {

display: flex;

}

.tabs-box {

height: 44px;

background: #ffffff;

.tab-item-box {

width: 100%;

margin: 0 auto;

.item {

width: 120px;

line-height: 44px;

text-align: center;

position: relative;

cursor: pointer;

&.active {

color: @text-blue;

&:after {

content: '';

position: absolute;

left: 40px;

width: 40px;

height: 3px;

bottom: 0;

background-color: @text-blue;

border-radius: 2px 2px 0 0;

}

.main-content {

height: 465px;

background: #ffffff;

border-radius: 4px;

position: relative;

.left-box {

width: 230px;

height: 100%;

overflow: hidden;

overflow-y: auto;

border-right: 1px solid #ebeef8;

.type-item {

height: 40px;

line-height: 40px;

padding-left: 18px;

position: relative;

cursor: pointer;

&:first-child {

margin-top: 12px;

}

&:last-child {

margin-bottom: 12px;

}

&.active-name {

background: #f4f7fc;

color: @text-blue;

&:before {

content: '';

display: block;

position: absolute;

left: 0;

background-color: @text-blue;

width: 3px;

height: 16px;

top: 12px;

}

.right-box {

flex: 1;

padding: 20px;

box-sizing: border-box;

position: relative;

.scroll-box {

height: calc(100% - 20px);

overflow: hidden;

overflow-y: auto;

margin-bottom: 20px;

}

.center {

display: flex;

justify-content: center;

align-items: center;

height: 100%;

width: 100%;

.img {

height: 163px;

width: 300px;

display: block;

}

.cur-p {

cursor: pointer;

}

</style>

四、使用到的common方法：

//校验输入是否仅包含数字和字母

isValidAlphanumeric(input: string) {

const alphanumericPattern = /^[a-zA-Z0-9]+$/

return alphanumericPattern.test(input)

}