如何優化el-table單選

一、增加單選框可點擊區域

在默認情況下，el-table的單選框只有在鼠標移動到表格內容區域時才會出現，這很容易讓用戶忽略它的存在。

因此，我們可以通過增加單選框的可點擊區域來提高用戶的使用體驗。一種簡單的實現方式是，在表格行上添加一個單選框佔位符，使用戶在任何位置點擊表格行都能夠選中改行。

<el-table
  :data="tableData"
  :row-key="row => row.id"
  @current-change="handleRowClick">
  <el-table-column
    type="selection"
    width="55">
    <template slot-scope="{row}">
      <span 
        style="position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer"
        @click.native.stop.prevent="handleRowClick(row)"
        />
    </template>
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名">
  </el-table-column>
  <el-table-column
    prop="age"
    label="年齡">
  </el-table-column>
</el-table>

以上代碼中，我們在單選框內添加了一個跨度位置的絕對定位的span元素，並監聽其click事件，這樣用戶在點擊表格行時，實質上是在點擊單選框的可點擊區域，從而達到了增加選中體驗選項的目的。

二、設置默認選中第一行

在一般情況下，用戶進入頁面時比較希望看到一些默認數據。通過設置默認選中第一行，可以快速啟動一個需要用戶操作的功能。

實現方法相對來說很簡單，只需要在mounted鉤子函數中執行表格的setCurrentRow方法，將第一行設置為默認選項即可。

mounted() {
  this.$nextTick(() => {
    if (this.$refs.table && this.tableData.length) {
      this.$refs.table.setCurrentRow(this.tableData[0]);
    }
  });
}

以上代碼中，我們監聽了mounted鉤子函數，通過$refs獲取表格實例，在設置表格默認選中行時需要保證表格的數據this.tableData已經加載完畢。

三、在表格外添加全選功能

單選模式下，我們可能也會需要選擇多個元素進行操作。添加全選功能可以滿足這個需求。

該功能的具體實現方式是，在表格外添加一個全選框，並綁定一個事件，對選中的行進行記錄和操作。

<template>
  <div>
    <el-checkbox v-model="allChecked" @change="handleAllCheckChange">全選</el-checkbox>
    <el-table
      :data="tableData"
      :row-key="row => row.id">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年齡">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allChecked: false,
      tableData: [
        {
          id: 1,
          name: '小明',
          age: 18
        },
        {
          id: 2,
          name: '小紅',
          age: 20
        },
        {
          id: 3,
          name: '小張',
          age: 22
        }
      ],
      checkedData: []  //選中的數據
    };
  },

  methods: {
    handleAllCheckChange(val) {
      this.allChecked = val;
      if (this.tableData.length) {
        this.checkedData = val ? this.tableData : [];  //將所有數據加入或清空選中列表
        this.$refs.table.toggleAllSelection();  //改變表格的全選狀態
      }
    }
  }
};
</script>

以上代碼中，我們在表格外添加了一個全選框，並在handleChange事件中記錄選中的行。為了加強全選功能，在表格頭中增加一個全選框，通過toggleAllSelection方法來控制表格中的行的選中狀態。

四、通過拖拽選擇實現單選

通過鼠標拖拽實現單選是常見的UI常見功能。在el-table中也可以通過增加一個隱藏的單選框來實現該功能。

<template>
  <el-table
    ref="table"
    :data="tableData"
    :row-key="row => row.id">
    <el-table-column
      type="selection"
      width="55">
      <template slot-scope="{row}">
        <span 
          style="position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:-1"
          :class="{'el-checkbox': true, 'is-checked': row === checkedRow}"
          :style="{ 'pointer-events': 'none' }"
          />
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年齡">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '小明',
          age: 18
        },
        {
          id: 2,
          name: '小紅',
          age: 20
        },
        {
          id: 3,
          name: '小張',
          age: 22
        }
      ],
      checkedRow: null,  //選中的數據
      startRow: null,  //拖拽開始的行數據
      isMouseDown: false  //鼠標是否按下
    };
  },
  mounted() {
    const thiz = this;
    document.body.addEventListener('mousedown', function() {
      thiz.isMouseDown = true;
    });
    document.body.addEventListener('mouseup', function() {
      thiz.isMouseDown = false;
      thiz.startRow = null;
    });
    this.$nextTick(function() {
      const rows = this.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
      for (let i = 0; i < rows.length; i++) {
        rows[i].addEventListener('mousedown', function() {
          thiz.startRow = thiz.tableData[i];
        });
        rows[i].addEventListener('mouseover', function() {
          if (thiz.isMouseDown && thiz.startRow) {
            thiz.checkedRow = thiz.tableData[i];
          }
        });
      }
    });
  }
};
</script>

以上代碼中，我們在mounted中監聽mouse事件，增加了拖拽選擇實現單選的效果。在初次點擊表格時，記錄起始選擇位置的數據，並通過監聽mouseover事件實時更新選擇範圍。

五、增加單元格可點擊區域

除了表格行外，有時也需要單元格可以被點擊來實現更細節的操作。通過為單元格內容增加點擊事件，我們可以進行一些更為靈活和定製化的操作。

<el-table
  :data="tableData"
  :row-key="row => row.id">
  <el-table-column
    prop="name"
    label="姓名">
    <template slot-scope="{row}">
      <span 
        :style="{cursor: 'pointer'}"
        @click="handleCellClick(row)">
        {{ row.name }}
      </span>
    </template>
  </el-table-column>
  <el-table-column
    prop="age"
    label="年齡">
    <template slot-scope="{row}">
      <span 
        :style="{cursor: 'pointer'}"
        @click="handleCellClick(row)">
        {{ row.age }}
      </span>
    </template>
  </el-table-column>
</el-table>

以上代碼中，我們對需要點擊的單元格中的內容增加了click事件，這樣就能夠實現對單元格的簡單操作了。