ant-design-vue之中的table表格的使用_antd vue table-优快云博客

这篇文章展示了如何在Vue中使用a-table组件进行数据绑定、自定义列模板和行点击事件处理。通过v-if和v-else-if指令，根据数据动态决定表格单元格的内容，如状态显示和操作列的不同按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a-table
          :columns="columns"//绑定表头
          :data-source="data"//绑定表体数据
          size="middle"
          :pagination="pagination"//给表格加上分页器
          class="table"
          :customRow="rowClick"//给表格的每一行都增加点击函数
          }"
        >
          <template #name="{ text }">
            <a>{{ text }}</a>
          </template>

//在表体中添加if判断 通过判断来显示该列或者该单元格应该显示什么   #bodyCell是用以自定义表体数据//的插槽   column是表头数据    record是表体每一行的数据  ，两者用于定位每一个单元格，再根据判断显示该单元格内的内容-->
          <template #bodyCell="{ column, record }">

//在这里通过  column内的dataIndex属性和  record内具体你想增加判断的值，我这里来判断  状态status，两个属性用以固定一个单元格显示的内容
            <template v-if="column.dataIndex == 'status' && record.status == 1">
              <a style="color: #81c26b" class="aaa">成功</a>
            </template>

            <template  v-else-if=" column.dataIndex == 'type' && record.type == 0">
              <span>新建</span>
            </template>

            <template v-else-if="column.dataIndex == 'type' && record.type !== 0">
              <span>其他</span>
            </template>
//这个判断里面添加的是操作模块，该列的内容是一些操作的东西
            <template v-else-if="column.dataIndex == 'operate'">
               <a-button size="small" type="link" danger>删除</a-button>
              <a-button size="small" type="link" @click="logsModal(record)"
                >日志</a-button
              >
            </template>
          </template>
        </a-table>






<script setup>
import {ref,reactive} from 'vue'

const columns = [
  {
    title: "任务名称",
    dataIndex: "name",
    key: "name",
    align: "center",
  },
  {
    title: "任务类型",
    dataIndex: "type",
    key: "type",
    align: "center",
    // width: 80,
  },
 
  {
    title: "状态",
    dataIndex: "status",
    key: "state",
    align: "center",
  },
  
  {
    title: "操作",
    dataIndex: "operate", 
    key: "operate",
    align: "center",
  },
];


const data = ref([
  {
    name:"创建任务",
    type:0,
    status:1,
  },
  {
    name:"创建任务",
    type:1,
    status:1,
  },
  {
    name:"创建任务",
    type:0,
    status:0,
  },
])
</script>