radio.vue 978 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <script setup lang="ts">
  2. import { ref } from "vue";
  3. import { tableData } from "./data";
  4. const tableRef = ref();
  5. const currentRow = ref();
  6. const setCurrent = (row?: any) => {
  7. // 获取表格的方法 tableRef.value.getTableRef()
  8. const { setCurrentRow } = tableRef.value.getTableRef();
  9. setCurrentRow(row);
  10. };
  11. const handleCurrentChange = val => {
  12. currentRow.value = val;
  13. };
  14. const columns: TableColumnList = [
  15. {
  16. label: "日期",
  17. prop: "date"
  18. },
  19. {
  20. label: "姓名",
  21. prop: "name"
  22. },
  23. {
  24. label: "地址",
  25. prop: "address"
  26. }
  27. ];
  28. </script>
  29. <template>
  30. <div>
  31. <pure-table
  32. ref="tableRef"
  33. :data="tableData"
  34. :columns="columns"
  35. highlight-current-row
  36. @page-current-change="handleCurrentChange"
  37. />
  38. <div style="margin-top: 20px">
  39. <el-button @click="setCurrent(tableData[1])">Select second row</el-button>
  40. <el-button @click="setCurrent()">Clear selection</el-button>
  41. </div>
  42. </div>
  43. </template>