element.antd1相关问题记录、element-plus实现表格跨行跨列，antd1.x插槽、跨行同时使用问题

原创已于 2025-04-27 11:42:06 修改

· 268 阅读

0 ·

版权

文章标签：

#vue.js #elementui #javascript

于 2025-02-05 10:28:23 首次发布

1.1 需求：element-plus+vue3表格跨行跨列

<script setup>
// 隐藏表格合并行或列的计算方法:当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex
const objectSpanMethods = ({ row, columnIndex }) => {
  // 合并第一列单位
  if (columnIndex === 0) {
    if (row.rowSpan != 0) {
      return { rowspan: row.rowSpan, colspan: 1 }
    } else if (row.teamName == '合计') {
      return { rowspan: 1, colspan: 1 }
    } else {
      // 不显示
      return { rowspan: 0, colspan: 0 }
    }
  }
  // columnIndex大于4的列
  if (columnIndex > 4) {
    // 满足条件根据返回数据跨行
    if (row.frequ == 1) {
      return { rowspan: row.cnt, colspan: 1 }
    }
  }
}
</script>
<template>
    <el-table :data="tableData" border :span-method="objectSpanMethods">
        <el-table-column prop="teamName" label="单位" width="120" />
        <el-table-column prop="prjName" label="工程" width="120" />
        <el-table-column prop="occDigText" label="生产完成" align="right" />
        <el-table-column prop="assPriceText" label="单价" align="right" />
        <el-table-column prop="normBalaText" label="单项定额材料金额" align="right" width="110" />

        <el-table-column prop="addBalaText" label="本月定额材料金额" align="right" />
        <el-table-column prop="lastStockText" label="上月结存" align="right" />
        <el-table-column prop="inBalaText" label="当月领用" align="right" />
        <el-table-column prop="occBalaText" label="本月考核金额" align="right" />
        <el-table-column prop="stockBalaText" label="当月结存额" align="right" />
        <el-table-column prop="diffBalaText" label="节+超-额" align="right" />
    </el-table>
</template>

1.2 效果图

2.1 需求：antd1.x + vue2 实现跨行

// template 
<a-table bordered :rowKey="(_, i) => i" :columns="filteredColumns" :dataSource="dataSource">
<span slot="action" slot-scope="text, record">
...
</span>
</a-table>

// data数据
data() {
// 无插槽使用
const renderContent = (value, row) => {
  const obj = {
    children: value,
    attrs: {},
  };
  if (row.conRowSpan) {
    obj.attrs.rowSpan = row.conRowSpan;
  } else {
    obj.attrs.rowSpan = 0; // 0不显示
  }
  return obj;
};

// 可同时使用插槽和跨行列
const customCell = row => {
  if (row.prjRowSpan != 0) {
    return { attrs: { rowSpan: row.prjRowSpan } }
  } else {
    return { style: { display: 'none' } }
  }
}
return {
columns: [
  { title: '版本', align: "center", dataIndex: 'versionCode', customCell },
    ...
  { title: '操作', dataIndex: 'action', align: "center", fixed: "right", width: 147, customCell, scopedSlots: { customRender: 'action' } }
],
dataSource:[]
}

2.2 效果图

2.3 注意：若数据不是按需的会出现错乱

3.1 需求：antd1.x点击表格行添加背景色并触发事件（需求：点击左边表格行更新右边表格）

      <a-table ref="table" size="middle" :scroll="{ x: true }" rowKey="id" :columns="columns"
          :pagination="ipagination" :loading="loading" :dataSource="dataSource" :customRow="customRow"
          :rowClassName="record => record.id === this.tableCurrRowId ? 'customBlue' : null">
          <!-- 评分人信息 -->
          <div slot="raterInfo" slot-scope="text, record" class="raterInfo">
            <img src="../../assets/touxiang.png" alt="">
            <div>
              <p>{{ record.realname }}</p>
              <p class="desc">{{ record.departName }}</p>
            </div>
          </div>
        </a-table>

<script>
    // data：当前选中table行的id
    tableCurrRowId: 0,
    // methods：点击表格行
    customRow(record) {
      return {
        on: {
          click: () => {
            this.tableCurrRowId = record.id
            this.$refs.rightList.initDictConfig(record.id)
          },
        },
      };
    },
</script>

<style scoped lang="less">
::v-deep(.customBlue) {
  cursor: pointer;

  td {
    background-color: rgba(246, 249, 254, 1) !important;
  }
}
</style>

3.2 效果

4.1 需求：select组件输入回车或着选择提交

<template>
  <a-select v-model="model.itemName" optionFilterProp="value" :options="selectOptList" showSearch
                :filter-option="optionFilter" placeholder="请输入考核规定" @inputKeydown="addItem" />
</template>

<script>
data() {
  return {
    model:{},
    selectOptList:[]
  }
},
methods: {
    addItem(e) {
      if (e.keyCode === 13) {
        const newItem = e.target.value
        if (newItem.length > 0) {
          let newArr = JSON.parse(JSON.stringify(this.selectOptList)) //深拷贝
          newArr.push({ value: newItem, label: newItem })
          this.selectOptList = newArr
        }
      }
      const resIndex = this.selectOptList.findIndex(item => item.value === item.label)
      this.model.objName = resIndex === -1 ? 1 : 2
    },
    optionFilter(input, option) {
      return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
    },
}
</script>

4.2 效果