需求是使用el-table的多选功能,然后不想要多选改成单选。
在这里插入图片描述
代码

<template>
  <div class="contentBox"
       v-loading="loading">
 <el-table :data="list"
                ref="accountRef"
                @select="handleTableChange">
        <el-table-column type="selection"  width="45"></el-table-column>
        <el-table-column width="100" prop="name"></el-table-column>
        <el-table-column width="100" prop="no"></el-table-column>
        <el-table-column width="100" prop="date"></el-table-column>
   </el-table>     
   </div>
   </template>                 
<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs,
} from "vue";

export default defineComponent({
  components: { },
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const accountRef = ref(null)
    const data = reactive({
      list: [],
      selectTable: [],
    });
    //表格单选
    const handleTableChange = (list, row) => {
      if (list.length === 0) {
        data.selectTable = [];
        return
      }
      // let itemData = JSON.parse(JSON.stringify(row))
      accountRef.value.clearSelection()
      data.list.forEach((ele) => {
        if (ele.id === row.id) {
          accountRef.value.toggleRowSelection(ele, true)
          data.selectTable = [ele];
        }
      })
    };
    return {
      ...toRefs(data),
      handleTableChange,
      accountRef
    };
  },
});
</script>

这里是vue3的写法
1、绑定table实例ref=“accountRef”,然后记的声明const accountRef = ref(null)和return返回里加上accountRef。
2、绑定select方法,定义handleTableChange函数 @select=“handleTableChange”
3、table的绑定事件select,select有两个回掉参数selection, row。selection选中的数据数组,row当前选中的数据。
4、table的方法,clearSelection()清除表格选中,toggleRowSelection(ele, true) 手动选中。先取清除选中,再根据勾选你选择的那一条数据。
5、 toggleRowSelection有两个参数一个是要选的数据,一个是该数据的状态,true选中,false不选

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐