美文网首页
vue2+ant-design-vue table的使用:cus

vue2+ant-design-vue table的使用:cus

作者: IamaStupid | 来源:发表于2021-12-17 13:58 被阅读0次

vue2+ant-design-vue table的使用:customRender

需求情况:customRender使用了合并列,就没办法使用slot了

解决方法:

<a-table
          :columns="columns"
          row-key="userId"
          :data-source="dataSource"
          :pagination="false"
          :loading="loading"
          class="x-table"
        >
          <span slot="planNameTitle">{{$t('stats.tab1Text1')}}</span>
          <span slot="nameTitle">{{$t('stats.tab1col1')}}<b>{{'('+userTotal+')'}}</b></span>
          <span slot="supervisorTitle">{{$t('stats.tab1col2')}}</span>
          <span slot="percentageTitle">{{$t('stats.tab1col3')}}</span>
          <span slot="overdueCountTitle">{{$t('stats.tab1col4')}}</span>
          <span slot="actionTitle">{{$t('stats.tab1col5')}}</span>
          <span slot="action" slot-scope="text, record">
          <span class="btn ant-dropdown-link" @click="handleGoDetail(record)">
              <!-- 查看详情 -->{{$t('staff.tableDetail')}}
              <i class="iconfont icon-zhankai"></i>
          </span>
          </span>
          <span slot="percentage" slot-scope="text, record">
            <span>{{record.finishCount | progressPanel(record.allCount)}}</span>
          </span>
</a-table>

// data () 中的数据
...
columns: [
        {
          key: 'planName',
          slots: { title: 'planNameTitle' },
          dataIndex: 'planName',
          customRender: (value, row, index) => {
            const obj = {
              // <div class="col-tit"><i class="iconfont icon-tubiao-bingtu"></i>xxxxxxx</div>
              children: this.$createElement(
                'div',
                {
                  class: 'col-tit',
                  on: {
                    click: () => {
                      this.handlePieChart(row, index)
                    }
                  },
                },
                [
                  this.$createElement(
                    'i',
                    {
                      class: 'iconfont icon-tubiao-bingtu'
                    }
                  ),
                  value
                ]
              ),
              attrs: {},
            };
            if (row.rowSpan > -1) {
              obj.attrs.rowSpan = row.rowSpan;
            }
            return obj;
          },
        },
        {
          key: 'name',
          slots: { title: 'nameTitle' },
          dataIndex: 'name',
        },
        {
          key: 'supervisor',
          slots: { title: 'supervisorTitle' },
          dataIndex: 'supervisor',
        },
        {
          key: 'percentage',
          slots: {title: 'percentageTitle'},
          scopedSlots: { customRender: 'percentage' },
        },
        {
          key: 'overdueCountTitle',
          slots: {title: 'overdueCountTitle'}, //'过期计数',
          dataIndex: 'overdueCount',
        },
        {
          key: 'action', //"详情",
          slots: {title: 'actionTitle'},
          scopedSlots: { customRender: 'action' },
        }
],
...

相关文章

网友评论

      本文标题:vue2+ant-design-vue table的使用:cus

      本文链接:https://www.haomeiwen.com/subject/tndifrtx.html