Iview设置某一行不能选中

曾经终败给现在 2023-06-12 04:10 63阅读 0赞

以下生效的前提是,给table中的data添加 _disabled属性

通过给 columns 数据设置一项,指定 type: ‘selection’,即可自动开启多选功能。

给 data 项设置特殊 key _checked: true 可以默认选中当前项。

给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。

正确使用好以下事件,可以达到需要的效果:

@on-select,选中某一项触发,返回值为 selection 和 row,分别为已选项和刚选择的项。
@on-select-all,点击全选时触发,返回值为 selection,已选项。
@on-selection-change,只要选中项发生变化时就会触发,返回值为 selection,已选项。

  1. const listData = result.data;
  2. //针对返回的数据for循环,来控制前端某行是否可以被选择
  3. for (var i = 0; i < listData.data.length; i++) {
  4. if (listData.data[i].auditStatus >1) { //1 是审核中,2是审核通过,3是已驳回
  5. listData.data[i]._disabled = true;
  6. }
  7. };
  8. <template>
  9. <div>
  10. <Table border ref="selection" :columns="columns4" :data="data1"></Table>
  11. <Button @click="handleSelectAll(true)">Set all selected</Button>
  12. <Button @click="handleSelectAll(false)">Cancel all selected</Button>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data () {
  18. return {
  19. columns4: [
  20. {
  21. type: 'selection',
  22. width: 60,
  23. align: 'center'
  24. },
  25. {
  26. title: 'Name',
  27. key: 'name'
  28. },
  29. {
  30. title: 'Age',
  31. key: 'age'
  32. },
  33. {
  34. title: 'Address',
  35. key: 'address'
  36. }
  37. ],
  38. data1: [
  39. {
  40. name: 'John Brown',
  41. age: 18,
  42. address: 'New York No. 1 Lake Park',
  43. date: '2016-10-03'
  44. },
  45. {
  46. name: 'Jim Green',
  47. age: 24,
  48. address: 'London No. 1 Lake Park',
  49. date: '2016-10-01'
  50. },
  51. {
  52. name: 'Joe Black',
  53. age: 30,
  54. address: 'Sydney No. 1 Lake Park',
  55. date: '2016-10-02'
  56. },
  57. {
  58. name: 'Jon Snow',
  59. age: 26,
  60. address: 'Ottawa No. 2 Lake Park',
  61. date: '2016-10-04'
  62. }
  63. ]
  64. }
  65. },
  66. methods: {
  67. handleSelectAll (status) {
  68. this.$refs.selection.selectAll(status);
  69. }
  70. }
  71. }
  72. </script>

发表评论

表情:
评论列表 (有 0 条评论,63人围观)

还没有评论,来说两句吧...

相关阅读