antd 表格合并行与scopedSlots一起使用

最新推荐文章于 2024-10-25 15:56:49 发布

原创

最新推荐文章于 2024-10-25 15:56:49 发布 · 2.3k 阅读

标签

#前端 #es6 #vue.js #antd表格合并行 #合并行和插值

收录于

1、需求如图（表格中编辑间隔时间和备注）：

在这里插入图片描述

2、直接贴代码：

html：
<a-table
  bordered
  :columns="inspectionColumns"
  :dataSource="inspectionData"
  :pagination="false"
  rowKey="id"
>
  <template
    v-for="col in ['intervalTime']"
    :slot="col"
    slot-scope="record"
  >
    <div :key="col">
      <a-input
        v-if="record.min"
        style="margin: -5px 0"
        :value="record.min"
        @change="e => changeMin(e.target.value, record)"
      />
      <template v-else>
        {
  
  { record.min }}
      </template>
    </div>
  </template>
  <template
    v-for="item in ['remark']"
    :slot="item"
    slot-scope="record"
  >
    <div :key="item">
      <a-textarea 
        v-if="record.remark"
        style="margin: -5px 0"
        :value="record.remark"
        @change="e => changeRemark(e.target.value, record)"
      />
      <template v-else>
        {
  
  { record.remark }}
      </template>
    </div>
  </template>
</a-table>

js:
<script>
const inspectionColumns = [
  {
    title: "名称",
    dataIndex: "name",
    width: 220,
  },
  {
    title: "间隔时间(分钟)",
    scopedSlots: