使用vxe-table实现复选框的各种勾选逻辑

这都能重名?!

已于 2022-09-06 09:43:00 修改

阅读量7.8k

点赞数 4

分类专栏： vue element vxe-table 文章标签： vue.js javascript 前端

于 2022-03-24 19:57:53 首次发布

本文链接：https://blog.csdn.net/qq_44180688/article/details/123714551

版权

本文详细介绍了在vue项目中，如何利用vxe-table组件实现复选框的各种勾选逻辑，包括：禁止全选、勾选时校验条件、自动勾选规则、已操作数据不可勾选以及已勾选数据的取消。通过组件通信和事件监听，成功解决了多层组件结构下的数据交互问题。

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

需求描述

a)查询结果界面数据勾选控制：注意是勾选，不是选中
b)不能全选
c)勾选时，校验“本次开票数量”是否有值，只有有值且值大于0才能勾选
d)用户录入“本次开票数量”，数量大于 0且开票价格有值，自动勾选上
e)对于已经添加到对账单的开票明细的行，不可以勾选
f)对于已经勾选上的行，可以取消勾选

内心独白

这什么玩意儿需求啊能不能别这么搞，我还只是个小卷心菜。。。
但是转念一想其实这些需求对用户来说确实很有用，没办法，需求下来了，咱就得想办法实现
先进行最终效果展示
在这里插入图片描述

需求分析

现用框架: vue+elementui+vxeTable
项目代码结构: 三层：实际业务处理组件(第一层)–封装的通用的页面布局组件(第二层)–封装的表格通用组件(第三层)
单层结构的话很简单，多层结构也只是多了参数的回调及组件通信

封装的表格通用组件(第三层)主要代码展示

    <!-- 封装的表格通用组件(第三层) -->
    <vxe-table
      ref="xTable"
      border
      :show-overflow="'tooltip'"
      auto-resize
      :row-config="{ isCurrent: true, isHover: true }"
      :loading="loading"
      :data="tableData"
      :edit-rules="tableConfig.validRules || {}"
      :edit-config="{
   
        trigger: 'click',
        mode: 'cell',
        activeMethod: activeCellMethod,
        showIcon: false,
      }"
      :highlight-hover-row="tableConfig.highlight"
      :highlight-current-row="tableConfig.highlight"
      :column-config="{ minWidth: 150, width: 'auto' }"
      :resizable-config="{ minWidth:150 }"
      :keep-source="false"
      height="auto"
      class="xTable"
      header-cell-class-name="headerCellClassName"
      row-class-name="rowClassName"
      cell-class-name="cellClassName"
      :checkbox-config="quickCheck ? {trigger: 'row', checkMethod: checkBoxByRow, showHeader: showHeader} : {trigger: 'default', checkMethod: checkBoxByRow, showHeader: showHeader}"
      :radio-config="{labelField: 'name', trigger: 'row'}"
      @cell-mouseenter="changeHover"
      @cell-click="cellClick"
      @checkbox-change="checkedChange"
      @checkbox-all="checkedChange"
      @edit-closed="editClosedEvent"
      @radio-change="radioChange"
      @current-change="currentChangeEvent"
    >
      <!-- 序号列 -->
      <vxe-column
        :visible="!checkOrSeq"
        type="seq"
        :width="50"
        fixed="left"
        align="center"
        :resizable="false"
      >
      </vxe-column>
      <!-- 勾选列 -->
      <vxe-column
        :visible="checkOrSeq"
        :type="tableConfig.checkType"
        :width="50"
        fixed="left"
        align="center"
        :resizable="false"
      >
      </vxe-column>
    
  props: {
   
    // 表格配置
    tableConfig: {
   
      required: false,
      type: Object,
      default: () => {
   
        return {
   
          checkAble: true, // 展示勾选框
          checkType: 'checkbox',
          headerConfig: [], // 表头配置信息
          validRules: {
   }, // 必填校验信息
          pageConfig: {
   
            // 页码配置信息
            currentPage: 1,
            pageSize: 10,
            total: 0,
            pageSizes: [10, 20, 50, 100]
          }
        }
      }
    },
    tableData: {
   
      required: false,
      type: Array,
      default: () => []
    },
    // 单击行选中数据
    quickCheck: {
   
      type: Boolean,
      default: true
    },
    // 是否展示全选框
    showHeader: {
   
      type: Boolean,
      default: true
    }
  },
  data() {
   
    return {
   
      checkOrSeq: false,
      checkedList