如何优化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事件，这样就能够实现对单元格的简单操作了。