vue基礎(chǔ)之ElementUI表格詳解

更新時間：2022年02月05日 09:36:36 作者：jayLog

這篇文章主要為大家詳細介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

ElementUI 表格

前置工作：安裝好vue和elemetUI。如果是按需引入，請確保Table、TableColumn模塊已經(jīng)引入

示例：一個基本的表格

<template>
<el-table
          :data="tableData"
          stripe="true"
          style="width: 100%">
    <el-table-column
                     prop="name"
                     label="名稱">
    </el-table-column>
    <el-table-column
                     prop="todayBuy"
                     label="日購買">
    </el-table-column>
    <el-table-column
                     prop="monthBuy"
                     label="月購買">
    </el-table-column>
    <el-table-column
                     prop="totalBuy"
                     label="總共購買">
    </el-table-column>
</el-table>
</template>
<script>
export default {
    name:"home",
    data(){
        return {
            tableData: [
            {
                name: 'oppo',
                todayBuy: 500,
                monthBuy: 3500,
                totalBuy: 22000
            },
            {
                name: 'vivo',
                todayBuy: 300,
                monthBuy: 2200,
                totalBuy: 24000
            }// ...
            ]
        }
    }
}
</script>

請?zhí)砑訄D片描述

el-table的屬性

屬性	屬性值	說明
stripe	`bool`	是否使用斑馬紋
border	`bool`	是否使用邊框
height	數(shù)值	固定表頭。只要設(shè)置了屬性，就會自動固定表頭
max-height	數(shù)值	位表格設(shè)置最大高度

el-table-column的屬性

屬性	屬性值	說明
fixed	`true(默認;左)\|left\|right`	固定欄，滾動的時候會浮動起來，可以選擇浮在哪一邊

如果我們希望通過行內(nèi)的一些屬性來對行做不同的顯示，那么我們可以給el-table添加row-class-name屬性。

row-class-name屬性值是一個回調(diào)函數(shù)

// ...
<script>
export default {
  methods: {
      // 處理函數(shù)
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
 }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>

多級表頭

通過<el-column>嵌套實現(xiàn)多級表頭，數(shù)據(jù)更具prop進行遍歷，看如下案例

<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
        <!-- 地址沒有家prop屬性，所以不會對數(shù)據(jù)流影響 -->
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市區(qū)"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="郵編"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>

效果如下

請?zhí)砑訄D片描述

獲取表格，重點說下！?。?/h3>

js中如何獲取表格？，通過給<el-table>添加ref屬性為表格做唯一標識

<el-table highlight-current-row current-change="changerow" ref="signtable">
</el-table>
// ...
<script>
// ...
     methods: {
      setCurrent(row) {
          // 通過this.$refs.<表格ref值>
          // 設(shè)置表格的的二行為選中
        this.$refs.singleTable
      },
// ...
</script>

單選

只需要配置highlight-current-row屬性即可實現(xiàn)單選。之后由current-change事件來管理選中時觸發(fā)的事件，它會傳入currentRow，oldCurrentRow。如果需要顯示索引，可以增加一列el-table-column，設(shè)置type屬性為index即可顯示從 1 開始的索引號

<el-table highlight-urrent-row current-change="changerow">
    <el-column prop="name" label="姓名"></el-column>
    <el-column prop="address" label="地址"></el-column>
    <el-column prop="email" label="郵箱"></el-column>
</el-table>
<script>
// ...
     methods: {
      setCurrent(row) {
          // 設(shè)置表格的的二行為選中
        this.$refs.singleTable.setCurrentRow(1);
      },
// ...
</script>

多選

手動添加一個<el-column>屬性，添加type="selection",會調(diào)價一行多選按鈕

<template>
      <!-- 使用 selection-change監(jiān)聽選項改變，傳入一個函數(shù)名 -->
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
      <!-- type="selection" 生成多選 -->
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>
<script>
    // 選中某一行，清除選項
</script>

使用js選中

<script>
    // this.$refs.<表單標識>.toggleRowSelection(row),row為tableData的一整行數(shù)據(jù)
    this.$refs.multipleTable.toggleRowSelection(row);
    // this.$refs.<表單標識>.clearSelection();全不選
	this.$refs.multipleTable.clearSelection();
</script>

排序

在表格中定義default-sort定義默認排序列和排序規(guī)則

通過給列添加srtotable屬性賦予列排序功能

<template>
<!-- 在表格中設(shè)設(shè)置默認排序規(guī)則 -->
	<el-table
		:default-sort="{prop:'todayBuy',order:'descending'}">
        <el-table-column
                         prop="name"
                         label="名稱">
    	</el-table-column>
        <el-table-column
                         prop="todayBuy"
                         label="日購買">
	    </el-table-column>
        <el-table-column
                         prop="monthBuy"
                         label="月購買">
    	</el-table-column>
        <!-- 在表格中添加srottable屬性，會添加字段排序功能 -->
        <el-table-column
                         srottable
                         prop="totalBuy"
                         label="總共購買"
                         >
    	</el-table-column>
    </el-table>
    </el-table>
</template>

篩選

在列中定義:filters屬性，值為一個[{ text: '', value: '' }] 的選項數(shù)組，提供給用戶篩選。同時，指定處理的回調(diào)函數(shù):filter-method,值為函數(shù)名。有三個參數(shù)，選中的值、遍歷時候的行、遍歷時候的列

<template>
<!-- ... 設(shè)置選項和處理函數(shù)-->
	<el-table-column
                 :filters="[{text:'300',value:'300'},{text:'800',value:'800'}]"
                 :filter-method="handleFilter"
                 prop="monthBuy"
                 label="月購買">
    </el-table-column>
<!-- ... -->
</template>
<script>
handleFilter(val,row){
	return row.todayBuy == val
}
</script>

請?zhí)砑訄D片描述

自定義列

一般我們會添加一個操作列，如刪除和編輯。那么我們可以不指定prop屬性，然后為列添加其他內(nèi)容如下案例。同時，我們可以通過列上定義slot-scope="scope"，通過scope來獲取列和行。一下直接使用官網(wǎng)案例

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
        <!-- 定義slot-scope="scope"后就可在scope中獲取列和行數(shù)據(jù)了 -->
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
        <!-- 定義slot-scope="scope"后就可在scope中獲取列和行數(shù)據(jù)了 -->
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
        <!-- 定義slot-scope="scope"后就可在scope中獲取列和行數(shù)據(jù)了 -->
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1516 弄'
        }]
      }
    },
    methods: {
        // 按鈕的點擊函數(shù)
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

展開行

知識多又雜，一點點積累著，因為需求也是五花八門，用得上的。

在列(el-column)中添加屬性 type="expand"就可設(shè)置為展開行，展開的內(nèi)容定義在列標簽內(nèi)。屬性的獲取同樣是通過slot-scope="scope"詳情如下案例：

<template>
<el-table :data="tableData">
    <el-table-cloumn type="expand">
        <template slot-scope="scope">
			<el-card>
                <p>名稱：{{scope.row.name }}</p>
                <p>地址：{{scope.row.address }}</p>
             </el-card>
        </template>
    </el-table-cloumn>
</el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987125',
          name: '好滋好味雞蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
          address: '上海市普陀區(qū)真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味雞蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
          address: '上海市普陀區(qū)真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }
    }
  }
</script>