Petua untuk menggunakan komponen UI Vue biasa

Dalam pembangunan web moden, komponen UI adalah bahagian penting. Terdapat banyak perpustakaan komponen UI yang sangat baik dalam rangka kerja Vue.js, seperti Element-UI, Vuetify, Ant Design Vue, dsb. Pustaka komponen ini menyediakan banyak komponen yang mudah digunakan yang boleh membantu kami mencipta aplikasi web dengan lebih cekap. Artikel ini akan memperkenalkan beberapa komponen UI Vue yang biasa digunakan, serta petua dan kemahiran praktikal untuk menggunakan komponen ini.

1. El-Table

El-Table ialah salah satu komponen paling praktikal dalam ElementUI. Ia menyediakan cara intuitif untuk memaparkan dan memanipulasi data jadual. Berikut ialah beberapa petua untuk menggunakan El-Table:

1. Dayakan paging jadual

Paging diperlukan semasa memproses jumlah data yang banyak Anda boleh menggunakan fungsi paging yang disertakan dengan komponen El-Table untuk mengurangkan masalah pemuatan data. Berikut ialah contoh halaman mudah:

<template>
  <el-table
    :data="tableData"
    :height="400"
    :pagination="pagination"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 2,
        total: 4,
      },
    }
  },
}
</script>

2. Edit atau kendalikan kandungan dalam jadual

Kadangkala, kita perlu melakukan beberapa operasi atau suntingan dalam jadual. Komponen El-Table menyediakan pelbagai cara untuk mencapai operasi ini:

• slot slot: Lajur jadual boleh dimasukkan ke dalam jadual, menjadikan kandungan lajur boleh disesuaikan. Berikut ialah contoh pengeditan:

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    ></el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎' },
        { date: '2016-05-04', name: '王小虎' },
        { date: '2016-05-01', name: '王小虎' },
        { date: '2016-05-03', name: '王小虎' },
      ],
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
  }
}
</script>

• Kawasan pengembangan meja tersuai: Anda boleh menambah kawasan pengembangan meja tersuai untuk menjadikan operasi lebih intuitif dan mudah. Berikut ialah contoh kawasan sambungan jadual tersuai:

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    ></el-table-column>
    <el-table-column
      label="操作"
      width="180">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
      <template slot="append">
        <el-button size="mini" type="primary">全选</el-button>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎' },
        { date: '2016-05-04', name: '王小虎' },
        { date: '2016-05-01', name: '王小虎' },
        { date: '2016-05-03', name: '王小虎' },
      ],
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
  }
}
</script>

2. Vuetify

Vuetify ialah perpustakaan komponen UI Vue yang hebat dan cantik. Berikut ialah beberapa petua untuk menggunakan Vuetify:

1 Gunakan sistem Grid Vuetify

Sistem Grid Vuetify membolehkan kami membuat reka letak yang fleksibel dengan mudah. Berikut ialah contoh sistem Grid:

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12" md="6" lg="4">
        <v-card>
          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6" lg="4">
        <v-card>
          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6" lg="4">
        <v-card>
          <v-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

2 Gunakan komponen Borang Vuetify

Vuetify menyediakan banyak komponen borang yang berguna, seperti kotak input, kotak pilihan, suis, dsb. Berikut ialah contoh komponen borang Vuetify:

<template>
  <v-container fluid>
    <v-form>
      <v-text-field label="姓名" v-model="name"></v-text-field>
      <v-select label="性别" :items="genders" v-model="gender"></v-select>
      <v-checkbox label="同意协议" v-model="checked"></v-checkbox>
      <v-btn color="primary" :disabled="!validForm">提交</v-btn>
    </v-form>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      gender: '',
      genders: [
        '男性',
        '女性',
        '其他',
      ],
      checked: false,
    }
  },
  computed: {
    validForm() {
      return this.name && this.gender && this.checked
    },
  },
}
</script>

3. Ant Design Vue

Ant Design Vue ialah versi Vue bagi Ant Design, yang menyediakan berbilang komponen berkuasa, seperti butang, borang, pemilih, dsb. Berikut ialah beberapa petua untuk menggunakan Ant Design Vue:

1 Gunakan Komponen Butang Ant Design Vue

Komponen Butang Ant Design Vue membolehkan kami mencipta butang yang cantik dengan mudah. Berikut ialah contoh komponen butang Ant Design Vue:

<template>
  <div>
    <a-button>默认按钮</a-button>
    <a-button type="primary">主要按钮</a-button>
    <a-button type="danger">危险按钮</a-button>
    <a-button shape="round">圆角按钮</a-button>
    <a-button icon="search">带图标的按钮</a-button>
  </div>
</template>

2 Gunakan komponen borang Ant Design Vue

Ant Design Vue menyediakan berbilang komponen borang yang berguna, seperti kotak input, pemilih, pemilih tarikh, dsb. Berikut ialah contoh komponen borang Ant Design Vue:

<template>
  <div>
    <a-form>
      <a-form-item label="姓名">
        <a-input v-model="name"></a-input>
      </a-form-item>
      <a-form-item label="日期">
        <a-date-picker v-model="date"></a-date-picker>
      </a-form-item>
      <a-form-item label="城市">
        <a-select v-model="city">
          <a-select-option value="北京">北京</a-select-option>
          <a-select-option value="上海">上海</a-select-option>
          <a-select-option value="广州">广州</a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" :disabled="!validForm">提交</a-button>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      date: '',
      city: '',
    }
  },
  computed: {
    validForm() {
      return this.name && this.date && this.city
    },
  },
}
</script>

Ringkasan

Komponen UI Vue membolehkan kami membina aplikasi web dengan lebih pantas dan lebih cekap. Artikel ini memperkenalkan perpustakaan komponen Vue yang biasa digunakan dan menyediakan beberapa petua dan kemahiran praktikal. Mencuba petua ini boleh membantu kami membangunkan aplikasi Vue dengan lebih baik dan memberikan pengguna pengalaman yang lebih baik.

Atas ialah kandungan terperinci Petua untuk menggunakan komponen UI Vue biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!