基础

TIP

1.0.0+

普通用法

基础 - 图1

当avue-table组件属性中，data数据的对象数组，option为表格要配置的数据列，v-model为当前编辑或者新增的表单对象，自动根据option中的column配置去加载对象注入进去

  1. <avue-crud :data="data" :option="option" v-model="obj" :before-close="beforeOpen"></avue-crud>
  2. </br>
  3. <el-tag>当前弹出框表单中的数据{}</el-tag>
  5. <script>
  6. export default {
  7.  data() {
  8.       return {
  9.         obj:{},
  10.         data: [
  11.           {
  12.             name:'张三',
  13.             sex:'男',
  14.             date:'1994-02-23 00:00:00'
  15.           }, {
  16.             name:'李四',
  17.             sex:'女',
  18.             date:'1994-02-23 00:00:00'
  19.           }, {
  20.             name:'王五',
  21.             sex:'女',
  22.             date:'1994-02-23 00:00:00'
  23.           }, {
  24.             name:'赵六',
  25.             sex:'男',
  26.             date:'1994-02-23 00:00:00'
  27.           }
  28.         ],
  29.         option:{
  30.           title:'表格的标题',
  31.           page:false,
  32.           align:'center',
  33.           menuAlign:'center',
  34.           column:[
  35.              {
  36.               label:'姓名',
  37.               prop:'name'
  38.             },
  39.             {
  40.               label:'性别',
  41.               prop:'sex'
  42.             },{
  43.               label: "日期",
  44.               prop: "date",
  45.               type: "date",
  46.               format: "yyyy-MM-dd hh:mm:ss",
  47.               valueFormat: "yyyy-MM-dd hh:mm:ss",
  48.             }
  49.           ]
  50.         }
  51.       }
  52.     }
  53.   }
  54. </script>

丰富表格

该示例主要展示了表格丰富的显示效果。

基础 - 图2

  1. <el-row style="margin-bottom:20px;font-size:15px">
  2.   <el-col :span="4">显示边框: <el-switch size="small" v-model="showBorder"> </el-switch></el-col>
  3.   <el-col :span="4">显示斑马纹: <el-switch size="small" v-model="showStripe"> </el-switch></el-col>
  4.   <el-col :span="4">显示索引: <el-switch size="small" v-model="showIndex"> </el-switch></el-col>
  5.   <el-col :span="4">显示多选框: <el-switch size="small" v-model="showCheckbox"> </el-switch></el-col>
  6.   <el-col :span="4">显示表头: <el-switch size="small" v-model="showHeader"> </el-switch></el-col>
  7.   <el-col :span="4">显示分页: <el-switch size="small" v-model="showPage"> </el-switch></el-col>
  8. </el-row>
  9. <el-row style="margin-bottom:20px">
  10.    <el-radio-group v-model="sizeValue">
  11.     <el-radio label="">默认</el-radio>
  12.     <el-radio label="small">small</el-radio>
  13.     <el-radio label="mini">mini</el-radio>
  14.   </el-radio-group>
  15. </el-row>
  16. <avue-crud :data="data" :option="option0"></avue-crud>
  18. <script>
  19. export default {
  20.  data() {
  21.       return {
  22.         obj:{},
  23.         data: [
  24.           {
  25.             name:'张三',
  26.             sex:'男'
  27.           }, {
  28.             name:'李四',
  29.             sex:'女'
  30.           }, {
  31.             name:'王五',
  32.             sex:'女'
  33.           }, {
  34.             name:'赵六',
  35.             sex:'男'
  36.           }
  37.         ],
  38.         showBorder: false,
  39.         showStripe: false,
  40.         showHeader: true,
  41.         showIndex: true,
  42.         showCheckbox: false,
  43.         showPage:false,
  44.         sizeValue:''
  45.       }
  46.     },
  47.      computed: {
  48.        option0(){
  49.          return{
  50.             title:'表格的标题',
  51.             border:this.showBorder,
  52.             stripe:this.showStripe,
  53.             showHeader:this.showHeader,
  54.             index:this.showIndex,
  55.             size:this.sizeValue,
  56.             selection:this.showCheckbox,
  57.             page:this.showPage,
  58.             align:'center',
  59.             menuAlign:'center',
  60.             column:[
  61.               {
  62.                 label:'姓名',
  63.                 prop:'name'
  64.               },
  65.               {
  66.                 label:'性别',
  67.                 prop:'sex'
  68.               }
  69.             ]
  70.          }
  71.        }
  72.      }
  73.   }
  74. </script>

合并菜单

基础 - 图3

配置menuType为menu表格的操作栏目菜单合并，menuBtn卡槽为自定义卡槽,delBtn和editBtn会消失,dateBtn控件的dateDefault为true时首次进来会加载回调方法,

  1. <avue-crud :data="data" :option="option1" v-model="obj" @date-change="dateChange">
  2.   <template slot-scope="scope" slot="menuBtn">
  3.      <el-dropdown-item divided @click.native="tip">自定义按钮</el-dropdown-item>
  4.   </template>
  5.   <template slot-scope="scope" slot="menu">
  6.      <el-button size="small" @click.native="tip">自定义按钮</el-button>
  7.   </template>
  8. </avue-crud>
  10. <script>
  11. export default {
  12.  data() {
  13.       return {
  14.         obj:{},
  15.         data: [
  16.           {
  17.             name:'张三',
  18.             sex:'男',
  19.             date:'1994-02-23 00:00:00'
  20.           }, {
  21.             name:'李四',
  22.             sex:'女',
  23.             date:'1994-02-23 00:00:00'
  24.           }, {
  25.             name:'王五',
  26.             sex:'女',
  27.             date:'1994-02-23 00:00:00'
  28.           }, {
  29.             name:'赵六',
  30.             sex:'男',
  31.             date:'1994-02-23 00:00:00'
  32.           }
  33.         ],
  34.         option1:{
  35.           title:'表格的标题',
  36.           menuType:'menu',
  37.           page:false,
  38.           align:'center',
  39.           dateBtn:true,
  40.           dateDefault:true,
  41.           menuAlign:'center',
  42.           column:[
  43.              {
  44.               label:'姓名',
  45.               prop:'name'
  46.             },
  47.             {
  48.               label:'性别',
  49.               prop:'sex'
  50.             },{
  51.               label: "日期",
  52.               prop: "date",
  53.               type: "date",
  54.               format: "yyyy-MM-dd hh:mm:ss",
  55.               valueFormat: "yyyy-MM-dd hh:mm:ss",
  56.             }
  57.           ]
  58.         }
  59.       }
  60.     },
  61.     methods: {
  62.       dateChange(date){
  63.         this.$message.success(date);
  64.       },
  65.       tip(){
  66.         this.$message.success('自定义按钮');
  67.       }
  68.     }
  69.   }
  70. </script>

文本菜单

基础 - 图4

配置menuType为text时表格操作栏为文本按钮

  1. <avue-crud :data="data" :option="option2" v-model="obj" @date-change="dateChange">
  2.   <template slot-scope="scope" slot="menu">
  3.      <el-button type="text" size="small" @click.native="tip">自定义按钮</el-button>
  4.   </template>
  5. </avue-crud>
  7. <script>
  8. export default {
  9.  data() {
  10.       return {
  11.         obj:{},
  12.         data: [
  13.           {
  14.             name:'张三',
  15.             sex:'男',
  16.             date:'1994-02-23 00:00:00'
  17.           }, {
  18.             name:'李四',
  19.             sex:'女',
  20.             date:'1994-02-23 00:00:00'
  21.           }, {
  22.             name:'王五',
  23.             sex:'女',
  24.             date:'1994-02-23 00:00:00'
  25.           }, {
  26.             name:'赵六',
  27.             sex:'男',
  28.             date:'1994-02-23 00:00:00'
  29.           }
  30.         ],
  31.         option2:{
  32.           title:'表格的标题',
  33.           menuType:'text',
  34.           page:false,
  35.           align:'center',
  36.           dateBtn:true,
  37.           dateDefault:true,
  38.           menuAlign:'center',
  39.           column:[
  40.              {
  41.               label:'姓名',
  42.               prop:'name'
  43.             },
  44.             {
  45.               label:'性别',
  46.               prop:'sex'
  47.             },{
  48.               label: "日期",
  49.               prop: "date",
  50.               type: "date",
  51.               format: "yyyy-MM-dd hh:mm:ss",
  52.               valueFormat: "yyyy-MM-dd hh:mm:ss",
  53.             }
  54.           ]
  55.         }
  56.       }
  57.     },
  58.     methods: {
  59.       dateChange(date){
  60.         this.$message.success(date);
  61.       },
  62.       tip(){
  63.         this.$message.success('自定义按钮');
  64.       }
  65.     }
  66.   }
  67. </script>

图标菜单

基础 - 图5

配置menuType为icon时表格操作栏为图标按钮

  1. <avue-crud :data="data" :option="option3" v-model="obj" @date-change="dateChange">
  2.   <template slot-scope="scope" slot="menu">
  3.      <el-button size="small" @click.native="tip" icon="el-icon-share"></el-button>
  4.   </template>
  5. </avue-crud>
  7. <script>
  8. export default {
  9.  data() {
  10.       return {
  11.         obj:{},
  12.         data: [
  13.           {
  14.             name:'张三',
  15.             sex:'男',
  16.             date:'1994-02-23 00:00:00'
  17.           }, {
  18.             name:'李四',
  19.             sex:'女',
  20.             date:'1994-02-23 00:00:00'
  21.           }, {
  22.             name:'王五',
  23.             sex:'女',
  24.             date:'1994-02-23 00:00:00'
  25.           }, {
  26.             name:'赵六',
  27.             sex:'男',
  28.             date:'1994-02-23 00:00:00'
  29.           }
  30.         ],
  31.         option3:{
  32.           title:'表格的标题',
  33.           menuType:'icon',
  34.           page:false,
  35.           align:'center',
  36.           dateBtn:true,
  37.           dateDefault:true,
  38.           menuAlign:'center',
  39.           column:[
  40.              {
  41.               label:'姓名',
  42.               prop:'name'
  43.             },
  44.             {
  45.               label:'性别',
  46.               prop:'sex'
  47.             },{
  48.               label: "日期",
  49.               prop: "date",
  50.               type: "date",
  51.               format: "yyyy-MM-dd hh:mm:ss",
  52.               valueFormat: "yyyy-MM-dd hh:mm:ss",
  53.             }
  54.           ]
  55.         }
  56.       }
  57.     },
  58.     methods: {
  59.       dateChange(date){
  60.         this.$message.success(date);
  61.       },
  62.       tip(){
  63.         this.$message.success('自定义按钮');
  64.       }
  65.     }
  66.   }
  67. </script>