a-table

原创已于 2023-06-15 13:54:00 修改 · 339 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2023-04-23 15:33:00 首次发布

vantd随笔专栏收录该内容

10 篇文章

订阅专栏

文章描述了如何在表格中实现多选功能，通过`row-selection`属性设置，包括`selectedRowKeys`、`onChange`和`columnWidth`。同时，文章提到了使用`onSelectChange`方法来管理选中项，并通过`customRow`方法实现自定义行样式。当行被选中时，背景色会改变。文章还包含了一个CSS深度选择器，用于设置不同级别的表格行背景色。

表格里面的属性设置：设置多选

:row-selection="{selectedRowKeys: selectedRowKeys,

onChange: onSelectChange,

columnWidth: 30 }"

为子表格定义样式

template

@expand="onSelectChange"

:customRow="customRow"

data

//选中值

expanded: [],

method

onSelectChange(expanded, record) {
      console.log('expandedRowKeys', expanded)
      console.log('record', record)
      if (expanded) {
        this.expanded.push(record.no)
      } else {
        let index = this.expanded.indexOf(record.no)
        if (index > -1) {
          this.expanded.splice(index, 1)
        }
      }
    },
customRow(recode, rowindex) {
      console.log('recode', recode)
      console.log('this.expanded', this.expanded)
      let index = this.expanded.indexOf(recode.no)
      if (index > -1) {
        return { style: { backgroundColor: '#ECF5FC' } }
      }
    },

/deep/.ant-table-tbody {
  .ant-table-row {
    &.ant-table-row-level-0::after {
      background: #2273af !important;
    }
    &.ant-table-row-level-1 {
      background: #fbfef7 !important;
    }
  }
}