当前位置:   article > 正文

el-table每一行的回调方法及假删除真隐藏_el-table在一行回车调用函数

el-table在一行回车调用函数

html数据

  1. <template>
  2. <el-table :data="tableData" :row-class-name="rowClassName">//每一行的回调方法
  3. <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
  4. <el-table-column prop="name" label="姓名" width="120"></el-table-column>
  5. <el-table-column prop="province" label="省份" width="120"></el-table-column>
  6. <el-table-column prop="city" label="市区" width="120"></el-table-column>
  7. <el-table-column prop="address" label="地址" width="300"></el-table-column>
  8. <el-table-column prop="zip"label="邮编" width="120"></el-table-column>
  9. <el-table-column fixed="right" label="操作" width="120">
  10. <template slot-scope="scope">
  11. <el-button @click.native.prevent="deleteRow(scope.$index ,scope.row)"
  12. type="text" size="small">
  13. 删除
  14. </el-button>
  15. </template>
  16. </el-table-column>
  17. </el-table>
  18. </template>

js数据

  1. <script>
  2. export default {
  3. methods: {
  4. //每一行的回调方法
  5. rowClassName: function ({ row }) {
  6. if (row.showFlag==false) {
  7. //判断一下showFlag是不是等于false,如果是的话整条数据添加class为hidden-row的
  8. return "hidden-row";
  9. }
  10. return '';
  11. },
  12. deleteRow(index, row) {
  13. console.log(row)
  14. // rows.splice(index, 1);//真删除
  15. row.showFlag=false//假删除,showFlag=false
  16. }
  17. },
  18. data() {
  19. return {
  20. tableData: [{
  21. date: '2016-05-03',
  22. name: '王小虎',
  23. province: '上海',
  24. city: '普陀区',
  25. address: '上海市普陀区金沙江路 1518 弄',
  26. zip: 200333,
  27. showFlag:true
  28. }, {
  29. date: '2016-05-02',
  30. name: '王小虎',
  31. province: '上海',
  32. city: '普陀区',
  33. address: '上海市普陀区金沙江路 1518 弄',
  34. zip: 200333,
  35. showFlag:true
  36. }, {
  37. date: '2016-05-04',
  38. name: '王小虎',
  39. province: '上海',
  40. city: '普陀区',
  41. address: '上海市普陀区金沙江路 1518 弄',
  42. zip: 200333,
  43. showFlag:true
  44. }, {
  45. date: '2016-05-01',
  46. name: '王小虎',
  47. province: '上海',
  48. city: '普陀区',
  49. address: '上海市普陀区金沙江路 1518 弄',
  50. zip: 200333,
  51. showFlag:true
  52. }, {
  53. date: '2016-05-08',
  54. name: '王小虎',
  55. province: '上海',
  56. city: '普陀区',
  57. address: '上海市普陀区金沙江路 1518 弄',
  58. zip: 200333,
  59. showFlag:true
  60. }, {
  61. date: '2016-05-06',
  62. name: '王小虎',
  63. province: '上海',
  64. city: '普陀区',
  65. address: '上海市普陀区金沙江路 1518 弄',
  66. zip: 200333,
  67. showFlag:true
  68. }, {
  69. date: '2016-05-07',
  70. name: '王小虎',
  71. province: '上海',
  72. city: '普陀区',
  73. address: '上海市普陀区金沙江路 1518 弄',
  74. zip: 200333,
  75. showFlag:true
  76. }]
  77. }
  78. }
  79. }
  80. </script>

css

  1. <style>
  2. .hidden-row {
  3. display: none !important;//隐藏
  4. }
  5. ::v-deep.hidden-row {
  6. display: none !important;//隐藏
  7. }
  8. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/426246
推荐阅读
相关标签
  

闽ICP备14008679号