专业的编程技术博客社区

网站首页 > 博客文章 正文

ant design vue 3版本-table列项里行内容相同合并单元格

baijin 2024-10-27 08:09:00 博客文章 5 ℃ 0 评论


实现的方法:highLightCard 为需要合并的字段(注意,这里根据需求修改字段

处理函数(联调后,对返回数据data进行匹配):

//用来接收匹配的结果
const myArray = ref([]);

const setRowSpan = (data) => {
  //保存上一个name
  let x = "";
  //相同name出现的次数
  let count = 0;
  //该name第一次出现的位置
  let startindex = 0;

  for (let i = 0; i < data.length; i++) {
    //字段   highLightCard
    console.log(data[i].highLightCard);
    //这里是指定需要合并的列
    let val = data[i].highLightCard;
    if (i === 0) {
      x = val;
      count = 1;
      myArray.value[0] = 1;
    } else {
      if (val === x) {
        count++;
        myArray.value[startindex] = count;
        myArray.value[i] = 0;
      } else {
        count = 1;
        x = val;
        startindex = i;
        myArray.value[i] = 1;
      }
    }
  }
};
//api 返回数据 res.result.resultList
//接收赋值给表格
tableData.value = res.result.resultList;
//对数据进行匹配
setRowSpan(tableData.value);

表格

<a-table :dataSource="tableData" :columns="columns" />

表头,重点在 customCell ,return { rowSpan: myArray.value[rowIndex] },我这边用了isEditID.value || isEdit.value 判断内嵌编辑,编辑状态默认返回 { rowSpan: 1 }

const tableColumns = reactive([
  {
    title: "领先标志",
    width: "25%",
    dataIndex: "highLightCard",
    render: (row, dataIndex, index) => {
      //这里判断是否是进入编辑状态
      if (isEditID.value || isEdit.value) {
        return (
          <a-input
            size="small"
            v-model:value={row.highLightCard}
            onChange={(e) => {
              editObj.value = row;
            }}
          />
        );
      }
      return <span>{row[dataIndex]}</span>;
    },
    customCell: (record, rowIndex, column) => {

      if (isEditID.value || isEdit.value) {
        return { rowSpan: 1 };
      }
      return { rowSpan: myArray.value[rowIndex] };
    },
  },
  {
    title: "序号",
    width: "4%",
    dataIndex: "sort",
    align: "center",
  }])

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表