Crud 模块

行单机

行操作 - 图1

单机一行数据时回调row-click方法,同时返回当前行的row数据,event当前的操作对象,column当前列的属性

  1. <avue-crud :data="data" :option="option" @row-click="handleRowClick"></avue-crud>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. data: [
  7. {
  8. name:'张三',
  9. sex:'男'
  10. }, {
  11. name:'李四',
  12. sex:'女'
  13. }
  14. ],
  15. option:{
  16. page:false,
  17. align:'center',
  18. menuAlign:'center',
  19. column:[
  20. {
  21. label:'姓名',
  22. prop:'name'
  23. }, {
  24. label:'性别',
  25. prop:'sex'
  26. }
  27. ]
  28. }
  29. };
  30. },
  31. methods: {
  32. handleRowClick (row, event, column) {
  33. this.$notify({
  34. showClose: true,
  35. message: '单机'+JSON.stringify(row),
  36. type: 'success',
  37. });
  38. },
  39. }
  40. }
  41. </script>

行双击

行操作 - 图2

双击一行数据时回调row-dblclick方法,同时返回当前行的row数据,event当前的操作对象,column当前列的属性

  1. <avue-crud :data="data" :option="option" @row-dblclick="handleRowDBLClick"></avue-crud>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. data: [
  7. {
  8. name:'张三',
  9. sex:'男'
  10. }, {
  11. name:'李四',
  12. sex:'女'
  13. }
  14. ],
  15. option:{
  16. page:false,
  17. align:'center',
  18. menuAlign:'center',
  19. column:[
  20. {
  21. label:'姓名',
  22. prop:'name'
  23. }, {
  24. label:'性别',
  25. prop:'sex'
  26. }
  27. ]
  28. }
  29. }
  30. },
  31. methods: {
  32. handleRowDBLClick (row, event) {
  33. this.$notify({
  34. showClose: true,
  35. message: '双击'+JSON.stringify(row),
  36. type: 'success',
  37. });
  38. },
  39. }
  40. }
  41. </script>

行单选

行操作 - 图3

单选一行数据时需要设置highlightCurrentRow属性为true,回调current-row-change方法,同时返回当前行的row数据,

  1. <avue-crud ref="crud" :data="data" :option="option0" @current-row-change="handleCurrentRowChange"></avue-crud>
  2. <div style="margin-top: 20px">
  3. <el-button @click="setCurrent(data[1])">选中第二行</el-button>
  4. <el-button @click="setCurrent()">取消选择</el-button>
  5. </div>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. data: [
  11. {
  12. name:'张三',
  13. sex:'男'
  14. }, {
  15. name:'李四',
  16. sex:'女'
  17. }
  18. ],
  19. option0:{
  20. highlightCurrentRow:true,
  21. page:false,
  22. align:'center',
  23. menuAlign:'center',
  24. column:[
  25. {
  26. label:'姓名',
  27. prop:'name'
  28. }, {
  29. label:'性别',
  30. prop:'sex'
  31. }
  32. ]
  33. }
  34. }
  35. },
  36. methods: {
  37. setCurrent(row) {
  38. this.$refs.crud.setCurrentRow(row);
  39. },
  40. handleCurrentRowChange(val){
  41. this.$notify({
  42. showClose: true,
  43. message: '单选'+JSON.stringify(val),
  44. type: 'success',
  45. });
  46. }
  47. },
  48. }
  49. }
  50. </script>