溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

element中表格和表單的封裝方式是什么

發布時間：2022-07-29 11:35:50 來源：億速云閱讀：149 作者：iii 欄目：開發技術

《Element中表格和表單的封裝方式是什么》

目錄

引言
Element UI簡介
表格的封裝方式
表單的封裝方式
表格和表單的集成
最佳實踐
常見問題與解決方案
結論

引言

在現代前端開發中，表格和表單是用戶界面中最常見的組件之一。Element UI 是一個基于 Vue.js 的組件庫，提供了豐富的表格和表單組件，幫助開發者快速構建高效、美觀的用戶界面。本文將詳細介紹 Element UI 中表格和表單的封裝方式，幫助開發者更好地理解和使用這些組件。

Element UI簡介

Element UI 是一個基于 Vue.js 的組件庫，提供了豐富的 UI 組件，包括按鈕、表格、表單、對話框等。它以其簡潔的設計和強大的功能受到了廣大開發者的喜愛。Element UI 的表格和表單組件尤其強大，支持多種自定義和擴展功能，能夠滿足各種復雜的業務需求。

表格的封裝方式

基本表格

Element UI 提供了 el-table 組件來創建基本表格。以下是一個簡單的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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 弄'
        }
      ]
    }
  }
}
</script>

帶分頁的表格

在實際應用中，表格數據通常較多，需要使用分頁功能。Element UI 提供了 el-pagination 組件來實現分頁功能。以下是一個帶分頁的表格示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <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>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模擬數據請求
      setTimeout(() => {
        this.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 弄'
          }
        ];
        this.total = 40;
      }, 500);
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

帶篩選的表格

Element UI 的表格組件支持列篩選功能。以下是一個帶篩選的表格示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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="地址" :filters="[{ text: '上海市', value: '上海市' }, { text: '北京市', value: '北京市' }]" :filter-method="filterHandler"></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: '北京市海淀區'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '北京市朝陽區'
        }
      ]
    }
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  }
}
</script>

帶排序的表格

Element UI 的表格組件支持列排序功能。以下是一個帶排序的表格示例：

<template>
  <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
    <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
    <el-table-column prop="name" label="姓名" width="180" sortable></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 弄'
        }
      ]
    }
  }
}
</script>

自定義表格

Element UI 的表格組件支持自定義列模板，開發者可以根據需求自定義表格的顯示內容。以下是一個自定義表格的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">編輯</el-button>
      </template>
    </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 弄'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  }
}
</script>

表單的封裝方式

基本表單

Element UI 提供了 el-form 組件來創建基本表單。以下是一個簡單的示例：

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="活動名稱">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活動區域">
      <el-select v-model="form.region" placeholder="請選擇活動區域">
        <el-option label="區域一" value="shanghai"></el-option>
        <el-option label="區域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活動時間">
      <el-col :span="11">
        <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="即時配送">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活動性質">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
        <el-checkbox label="地推活動" name="type"></el-checkbox>
        <el-checkbox label="線下主題活動" name="type"></el-checkbox>
        <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊資源">
      <el-radio-group v-model="form.resource">
        <el-radio label="線上品牌商贊助"></el-radio>
        <el-radio label="線下場地免費"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活動形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即創建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>

帶驗證的表單

Element UI 的表單組件支持表單驗證功能。以下是一個帶驗證的表單示例：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="120px">
    <el-form-item label="活動名稱" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活動區域" prop="region">
      <el-select v-model="form.region" placeholder="請選擇活動區域">
        <el-option label="區域一" value="shanghai"></el-option>
        <el-option label="區域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活動時間" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即時配送" prop="delivery">
      <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活動性質" prop="type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
        <el-checkbox label="地推活動" name="type"></el-checkbox>
        <el-checkbox label="線下主題活動" name="type"></el-checkbox>
        <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊資源" prop="resource">
      <el-radio-group v-model="form.resource">
        <el-radio label="線上品牌商贊助"></el-radio>
        <el-radio label="線下場地免費"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活動形式" prop="desc">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">立即創建</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '請輸入活動名稱', trigger: 'blur' },
          { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '請選擇活動區域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '請選擇活動資源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '請填寫活動形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

動態表單

Element UI 的表單組件支持動態增減表單項。以下是一個動態表單的示例：