vue-antdesign——实现table单元格合并 换行展示 滚动到指定位置 行样式设置——技能提升

最近在写后台管理系统，遇到一个需求，就是要实现表格table组件的合并单元格，并实现编辑等功能。

vue-antdesign——实现table单元格合并+换行展示+滚动到指定位置+行样式设置

• 效果图
• 1.表格`table`组件实现单元格合并
• 2.合并单元格后换行展示内容
• • • 2.1 不需要编辑的纯展示的合并单元格换行展示：
    • 2.2 需要编辑的合并单元格换行展示：
• 3.滚动到指定行
• 4.行样式 `rowClassName`属性的使用
• 5.`a-tooltip`组件样式设置——将背景设置为白色

效果图

效果图如下：

下面做一下记录：

1.表格table组件实现单元格合并

之前写过一篇文章关于单元格合并的功能，这次也是一样的操作步骤。
antd中表格组件table实现单元格合并功能：http://t.csdn.cn/CmWMW

2.合并单元格后换行展示内容

回车编辑的内容，在合并的单元格中也要换行展示：
效果图如下：

实现方式如下：

2.1 不需要编辑的纯展示的合并单元格换行展示：

{
  title: '解析',
  dataIndex: 'type1',
  width: 190,
  customRender: (value, row, index) => {
    const answer = value.split(';');
    let html = answer.map((item) => {
      return <li>{item}</li>;
    });
    return {
      children: html,
      attrs: {
        rowSpan: this.titleArr[index],//合并单元格，具体步骤参考第一步
      },
    };
  },
},复制

2.2 需要编辑的合并单元格换行展示：

注意：在customRender中return的内容有children和attrs两个属性，children就是内容，attrs里面是合并单元格的参数，是行合并还是列合并等。

在customRender中的children中，是用单花括号来获取数据并进行数据操作。绑定点击事件的时候也是通过onClick的方式来处理的。

{
 title:'案例说明',
 dataIndex: 'SelfRemark',
 width: 200,
 customRender: (value, row, index) => {
   return {
     children: (
       <div>
         {value &&
           value.split('\n').map((item) => {
             return <li>{item}</li>;
           })}
         <a-icon
           slot="count"
           type="edit"
           style="color: #f90;"
           onClick={() => {
             this.handleEdit(row, index, 'SelfRemark', 3);
           }}
         />
       </div>
     ),
     attrs: {
       rowSpan: this.titleArr[index],
     },
   };
 },
},复制

3.滚动到指定行

之前写过一篇文章关于：页面滚动到指定位置：http://t.csdn.cn/iX4R0
使用的方法是：js中scrollIntoView()
这次同样也用这个来处理，用这个方法需要给行指定一个唯一的id。

{
  title: '行为标准',
  width: 240,
  dataIndex: 'type2',
  customRender: (value, row, index) => {
    return {
      children: <div id={'SelfScoreId' + index}>{value}</div>,
    };
  },
},复制

需要滚动到指定行(知道索引也就是第一行)的情况下，可以使用下面的代码实现：
document.getElementById('SelfScoreId' + i).scrollIntoView();
其中的i就是索引。

4.行样式 rowClassName属性的使用

给符合条件的某一行设置颜色：效果图如下：

<a-table :rowClassName="rowClassNameFn"></a-table>复制

行样式方法如下：

//行高亮
rowClassNameFn(row, index) {
  if (row.ApproverUserId == 2) {
    return 'hightCls';
  }
},复制

css样式：

<style scoped lang="less">
/deep/.detailWrap {
  .ant-table-tbody > tr:hover > td {
    background: #fff;
  }
  .ant-table-tbody > tr.hightCls {
    background: #fff3e1 !important;
  }
  .ant-table-tbody > tr.hightCls:hover > td {
    background: #fff3e1 !important;
  }
}
</style>复制

5.a-tooltip组件样式设置——将背景设置为白色

默认的底色是黑色的：

修改为白色的背景色：

 <a-tooltip overlayClassName="tooltipColor">
  <template slot="title"> 评分单项≤120分 </template>
  <div>
    <span class="requriedCls">*</span>
    <span> 自评分 </span>
    <a-icon
      slot="count"
      type="question-circle"
      theme="filled"
      style="color: #f90"
    />
  </div>
</a-tooltip>复制

<style lang="less">
/* //控制内容主题颜色 */
.tooltipColor {
  .ant-tooltip-inner {
    // 这里是框框
    color: rgba(0, 0, 0, 0.85);
    background-color: #fff !important;
  }
  .ant-tooltip-arrow::before {
    background-color: #fff !important;
  }
}
</style>复制

完成！！！多多积累，多多收获！