ant-design中表头自定义添加按钮

最新推荐文章于 2024-08-30 18:36:22 发布

一杯充满泡泡的可乐

最新推荐文章于 2024-08-30 18:36:22 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45781661/article/details/115577896

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

ant-design中表头自定义添加按钮

效果如下

在这里插入图片描述

代码如下

<template>
  <div>
    <a-table
      :columns="column"
      :data-source="data"
      :pagination="false"
      :rowKey="(record) => { return record.id;}"
    >
      <template
        slot="price"
        slot-scope="record"
      >
        {{record.price||'--'}}
      </template>
      <template
        slot="stock"
        slot-scope="record"
      >
        {{record.stock||'--'}}
      </template>

      <template
        slot="join_status"
        slot-scope="record"
      >
        <a-switch
          :checked="record==1?true:false"
          :disabled='true'
        ></a-switch>
      </template>
      <template slot="joinTitle">
        是否参于 <a-switch
          :checked="true"
          :disabled='true'
        ></a-switch>
      </template>

    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, price: 23, stock: 23, join_status: 1 },
        { id: 2, price: 23, stock: 23, join_status: 0 },
        { id: 3, price: 23, stock: 23, join_status: 1 },
      ],
      column: [
        {
          title: "售卖价",
          key: "price",
          scopedSlots: { customRender: "price" },
        },
        {
          title: "库存",
          key: "stock",
          scopedSlots: { customRender: "stock" },
        },
        {
          dataIndex: "join_status",
          key: "join_status",
          scopedSlots: { customRender: "join_status", title: "joinTitle" },
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>
<style lang='less' scoped>
</style>