Bootstrap

ant-design-vue之中的table表格的使用

<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>

;