iview table动态修改checked状态

最新推荐文章于 2024-09-05 11:41:09 发布

bingot

最新推荐文章于 2024-09-05 11:41:09 发布

阅读量3.1k

点赞数 1

分类专栏： iview 文章标签： iview vue table

本文链接：https://blog.csdn.net/bingot/article/details/106649418

版权

在vue项目中，遇到需要根据特定条件动态改变iview表格的选中状态，特别是要禁止某些行的选中操作。文章通过示例代码展示了如何实现这一功能，特别是在age相同的条件下允许选中，否则禁止选中。代码可以直接在iview Run环境中运行。

摘要由CSDN通过智能技术生成

背景：公司需要做一个根据列表某个条件相同筛选出可以选择的勾选框，其他禁用。在使用过程中发现，只要是修改了表格的数据结构，iview 表格的on-select-cancel方法就永远不执行，所以才有了自己瞎搞的方案。

我这里是根据age做条件，只要是age相同，就可以选，其他的禁止选择。
不多说，直接上代码：

<template>
  <div>
    <Table
      :row-class-name="rowClassName"
      border
      ref="selection"
      :columns="columns4"
      @on-select="checkChange"
      :data="data1"
    ></Table>
  </div>
</template>
<script>
export default {
   
  data() {
   
    return {
   
      columns4: [
        {
   
          type: "selection",
          width: 60,
          align: "center"
        },
        {
   
          title: "Name",
          key: "name"
        },
        {
   
          title: "Age"