hsq-pro/src/views/vent/monitorManager/gateMonitor/components/WindDoorFaultTable.vue

<template>
  <div class="windDoorFaultTable">
    <a-table size="small" :dataSource="dataSource" :columns="faultColumns" :pagination="pagination"
      :scroll="{ y: 200, }" @change="pageChange">
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex == 'status'">
          <div>{{ text == '1' ? '是' : '否' }}</div>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { faultColumns } from '../gate.data'

let props = defineProps({
  deviceListApi: {
    type: Function,
    required: true,

  },
})

let dataSource = ref<any[]>([])

//分页参数配置
let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 10, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
});

//查询列表
async function getList() {
  let res = await props.deviceListApi({ pageNo: pagination.current, pageSize: pagination.pageSize })
  dataSource.value = res.records || []
  pagination.total = res.total
}

function pageChange(val) {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  getList()
}
onMounted(() => {
  getList()
})
</script>

<style lang="less" scoped></style>