技术分享 | 学做测试平台开发-Vuetify 框架

vue add vuetify

<template>
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    :single-select="singleSelect"
    item-key="name"
    loading="true"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-switch
        v-model="singleSelect"
        label="Single select"
        class="pa-3"
      ></v-switch>
    </template>
  </v-data-table>
</template>
<script>
export default {
  data() {
    return {
      singleSelect: false,
      selected: [],
      headers: [
        {
          text: "id",   // 列名称
          value: "id",  // 列绑定的数据名称（接口返回数据字段名称）
          align: 'center', // 位置，可选'left' | 'center' |'right'
          sortable: true, // 是否可排序
          width: string // 宽度
        },
        {
          text: "用例名称",
          value: "caseName",
          align: 'center',
          sortable: false
        },
        {
          text: "用例数据",
          value: "caseData",
          align: 'center',
          sortable: false
        }
      ],
      desserts: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let post_data = {
        pageNum: 1,
        pageSize: 10
      }
      this.$api.cases.GetList(post_data).then(res => {
        this.desserts = res.data.data.data
      })
    }
  }
}
</script>