Crud 模块

自定义操作栏

自定义操作栏 - 图1

有时候我们自定义按钮,操作栏宽度不够,它是不能自适应的,需要设置menuWidth属性去改变宽度,同时在menu名字的卡槽接受我们自定义的dom,返回的scope中返回了当前行row以及其他我们需要的数据

  1. <avue-crud :data="data" :option="option">
  2. <template slot-scope="scope" slot="menu">
  3. <el-button icon="el-icon-check" size="small">自定义菜单按钮</el-button>
  4. </template>
  5. </avue-crud>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. data: [
  11. {
  12. name:'张三',
  13. sex:'男'
  14. }, {
  15. name:'李四',
  16. sex:'女'
  17. }
  18. ],
  19. option:{
  20. menuWidth:380,
  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. }
  37. </script>

隐藏

自定义操作栏 - 图2

menu属性接受一个Boolean的属性达到隐藏的效果,默认为false

  1. <avue-crud :data="data" :option="option1"></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. option1:{
  16. menu:false,
  17. page:false,
  18. align:'center',
  19. menuAlign:'center',
  20. column:[
  21. {
  22. label:'姓名',
  23. prop:'name'
  24. }, {
  25. label:'性别',
  26. prop:'sex'
  27. }
  28. ]
  29. },
  30. };
  31. }
  32. }
  33. </script>