一、效果

二、实现方式

1、插槽

        <template #status="{row}">
          <t-popconfirm content="确定修改状态吗？" @confirm="handleStatusChange(row)">
            <t-switch :value="row.status" :customValue="['0', '1']" />
          </t-popconfirm>
        </template>

    handleStatusChange(row) {
      const { userId, status } = row
      const params = { userId, status: status === '0' ? '1' : '0' }
      console.log('用户状态修改', params)
    }

2、h函数

使用cell渲染，即使写了插槽，插槽也不生效

      columns: [
        ...
        {
          width: 120,
          colKey: 'status',
          title: '状态',
          cell: (h, { row }) => {
            return h(
              't-popconfirm',
              { props: { content: '确定修改状态吗？', onConfirm: () => this.handleStatusChange(row) } },
              [h('t-switch', { props: { value: row.status, customValue: ['0', '1'] } })]
            )
          }
        },
        ...
      ]

3、jsx

需要在script标签上添加lang='jsx'

<script lang='jsx'>

          cell: (h, { row }) => {
            return <t-popconfirm content="确定修改状态吗？" onConfirm={()=>this.handleStatusChange(row)}>
              <t-switch value={row.status} customValue={['0', '1']} />
            </t-popconfirm>
          }