vue3+ts+vite+element plus 实现table勾选、点击单行都能实现多选

需求:table的多选栏太小,点击的时候要瞄着点,不然选不上,要求实现点击单行实现勾选

<ElTable
				border
				:data="tableDataD"
				style="width: 100%"
				max-height="500"
				ref="multipleTableRef"
				@selection-change="handleSelectionChange"
				@row-click="handleRowChick"
				><el-table-column type="selection" width="55" />
				<el-table-column type="index" width="50" />
				<el-table-column prop="variableName" label="Variable Name" />
				<el-table-column prop="weight" label="Weight" />
			</ElTable>

const weightList = ref([])
const handleSelectionChange = (val: any) => {
	weightList.value = val
	console.log(weightList)
}

const handleRowChick = (row) => {
	const selected = weightList.value.some(
		(item) => item.variableName === row.variableName
	)
	if (!selected) {
		weightList.value.push(row)
		multipleTableRef.value.toggleRowSelection(row)
	} else {
		const weightListNew = weightList.value.filter((item) => {
			return item.variableName !== row.variableName
		})
		weightList.value = weightListNew
		multipleTableRef.value.toggleRowSelection(row, false)
	}
}

  • 8
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 TS Vite Element Plus I18n开源项目是一个基于Vue3和TypeScript的快速开发框架,它集成了Element Plus组件库和国际化功能。 Vue3是目前最新的Vue版本,它带来了很多新的特性和改进,比如更好的性能、更强大的类型推断和优化的渲染逻辑。使用Vue3可以让开发者拥有更好的开发体验和更高效的编码方式。 TS是TypeScript的缩写,它是JavaScript的超集,为JavaScript添加了静态类型检查和其他新特性。使用TypeScript可以更早地发现代码错误,并提供更好的代码提示和重构能力,提高了代码的可维护性和可读性。 Vite是一个由Evan You(Vue的创造者)开发的新一代前端构建工具,它具有极快的冷启动和热重载能力,能够大大提升开发效率。使用Vite可以快速搭建起整个项目的开发环境。 Element Plus是一套基于Vue3的UI组件库,它提供了丰富的常用组件和样式,可以帮助开发者快速搭建精美的界面。Element Plus基于Vue3的语法进行了优化,提供了更好的性能和更丰富的功能。 I18n是国际化的缩写,它是指将应用程序适配到不同的语言和地区。开源项目中的I18n功能可以帮助开发者轻松实现多语言支持,提供了翻译和切换语言的功能。 综上所述,Vue3 TS Vite Element Plus I18n开源项目是一个强大的开发框架,它集成了最新的Vue版本、TypeScript、快速开发工具ViteElement Plus组件库和国际化功能。使用这个项目可以大大提高前端开发的效率和质量,特别适合构建大型和多语言的应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值