您的位置:首页 > 文旅 > 旅游 > 中信建设有限责任公司龙芳_廊坊有限公司_最新军事消息_整站seo外包

中信建设有限责任公司龙芳_廊坊有限公司_最新军事消息_整站seo外包

2025/3/16 10:08:36 来源:https://blog.csdn.net/qq_43258522/article/details/146036007  浏览:    关键词:中信建设有限责任公司龙芳_廊坊有限公司_最新军事消息_整站seo外包
中信建设有限责任公司龙芳_廊坊有限公司_最新军事消息_整站seo外包

在 Vue 3 中使用 Element Plus 的 el-table 组件实现反选和禁用某些行的功能,可以通过以下步骤实现:

1. 安装 Element Plus

首先,确保你已经安装了 Element Plus:

npm install element-plus

2. 引入 Element Plus 组件

在你的 Vue 组件中引入 el-table 组件:

<template><el-tableref="multipleTableRef":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" :selectable="selectable"></el-table-column><el-table-column prop="name" label="Name" width="180"></el-table-column><el-table-column prop="age" label="Age" width="180"></el-table-column><el-table-column prop="address" label="Address"></el-table-column></el-table>
</template><script setup>
import { ref, onMounted } from 'vue'const multipleTableRef = ref()
const selectedRows = ref([])
// 模拟需要选中的数据
const selectData = [{ id: 1, name: 'John', age: 25, address: 'New York', disabled: false },
]
// 表格的渲染数据
const tableData = ref([{ id: 1, name: 'John', age: 25, address: 'New York', disabled: false },{ id: 2, name: 'Jane', age: 22, address: 'London', disabled: true },{ id: 3, name: 'Tom', age: 30, address: 'Sydney', disabled: false },
])// 模拟请求数据
const getDataApi = async () => {const { code, data }= await axios.get()if (code === 200) {// 如果接口请求数据没有disabled属性,则根据 selectData 的数据进行加入属性,用于是否禁用data?.forEach(c => {c.disabled= false // 先初始化所有 checked 为 falseselectData?.forEach(v => {if (c.serviceId === v.serviceId) {c.disabled= true}})})tableData.value = data || []}
}const handleSelectionChange = (selection) => {selectedRows.value = selection
}// 禁用选中框
const selectable = (row) => {return !row.disabled; // 禁用 disabled 为 true 的行,如果该row没有disabled属性,则在数据拿到的时候根据你的需求情况加入disabled属性
}// 默认反选数据
const defaultSelect = () => {// selectData数据为需要选中的数据for (let i = 0; i < selectData?.length; i++) {multipleTableRef.value?.toggleRowSelection(tableData.value?.find(item => {return selectData[i].id === item.id}) || {},true)}
}onMounted(async () => {await getDataApi()await defaultSelect()
})</script>

3. 代码解析

  • multipleTableRef: 表格ref实例,用于操控整个table组件,包括反选等等。
  • tableData: 表格的数据源,其中 disabled 字段用于控制某一行是否可以被选中。
  • selectedRows: 用于存储当前选中的行。
  • selectData: 模拟需要选中的数据。
  • getDataApi: 模拟api请求数数据。
  • handleSelectionChange: 当用户选择或取消选择某一行时触发,更新 selectedRows
  • selectable: 用于控制某一行是否可以被选中。如果 row.disabledtrue,则该行不可选中。
  • defaultSelect: 反选功能,遍历所有行,切换每一行的选中状态(跳过被禁用的行)。

4. 运行效果

  • 表格中 disabledtrue 的行将无法被选中。
  • 点击“反选”按钮时,所有可被选中的行将切换选中状态。

5. 注意事项

  • 反选功能只会切换可被选中的行的状态,禁用的行不会受到影响。
  • 你可以根据实际需求调整 selectable 函数的逻辑,以实现更复杂的禁用规则。
  • 还可以加入分页等操作,根据需求来实现。

通过以上步骤,你可以在 Vue 3 中使用 Element Plus 实现表格的反选和禁用功能。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com