el-table表格的一些操作-表格实现单选、多选

在Element UI中，el-table组件支持单选和多选功能。你可以通过设置el-table的highlight-current-row属性来实现单选，以及通过row-key和selectable属性来实现多选。

以下是实现单选和多选的示例代码：

单选：

<template>
  <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 你的数据数组
      currentRow: null, // 当前选中行
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
  },
};
</script>

多选：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :selectable="selectable"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 你的数据数组
      multipleSelection: [], // 多选的数据数组
    };
  },
  methods: {
    selectable(row, index) {
      // 你可以在这里设置某行不可选
      return true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

在这些例子中，tableData是你的数据数组，每个元素对应表格中的一行。highlight-current-row属性使得表格的当前行高亮，current-change事件用于监听当前行的变化。row-key属性用于设置唯一键的字段名，selectable属性用于设置某行是否可选，selection-change事件用于监听选中项的变化。