• 基础
    • 普通用法
    • 丰富表格
    • 合并菜单
    • 文本菜单
    • 图标菜单

    基础

    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>