expand-row-keys element

<template>

    <el-table             :data="tableData5"             style="width: 100%"             row-key="id"             :expand-row-keys="expands"             @row-click="rowClick">         <el-table-column type="expand">             <template slot-scope="props">                 <el-form label-position="left" inline class="demo-table-expand">                     <el-form-item label="商品名称">                         <span>{{ props.row.name }}</span>                     </el-form-item>                     <el-form-item label="所属店铺">                         <span>{{ props.row.shop }}</span>                     </el-form-item>                     <el-form-item label="商品 ID">                         <span>{{ props.row.id }}</span>                     </el-form-item>                     <el-form-item label="店铺 ID">                         <span>{{ props.row.shopId }}</span>                     </el-form-item>                     <el-form-item label="商品分类">                         <span>{{ props.row.category }}</span>                     </el-form-item>                     <el-form-item label="店铺地址">                         <span>{{ props.row.address }}</span>                     </el-form-item>                     <el-form-item label="商品描述">                         <span>{{ props.row.desc }}</span>                     </el-form-item>                 </el-form>             </template>         </el-table-column>         <el-table-column                 label="商品 ID"                 prop="id">         </el-table-column>         <el-table-column                 label="商品名称"                 prop="name">         </el-table-column>         <el-table-column                 label="描述"                 prop="desc">         </el-table-column>     </el-table> </template>   <style>     .demo-table-expand {         font-size: 0;     }     .demo-table-expand label {         width: 90px;         color: #99a9bf;     }     .demo-table-expand .el-form-item {         margin-right: 0;         margin-bottom: 0;         width: 50%;     } </style>   <script>     export default {         data() {             return {                 tableData5: [{                     id: '12987122',                     name: '好滋好味鸡蛋仔',                     category: '江浙小吃、小吃零食',                     desc: '荷兰优质淡奶,奶香浓而不腻',                     address: '上海市普陀区真北路',                     shop: '王小虎夫妻店',                     shopId: '10333'                 }, {                     id: '12987123',                     name: '好滋好味鸡蛋仔',                     category: '江浙小吃、小吃零食',                     desc: '荷兰优质淡奶,奶香浓而不腻',                     address: '上海市普陀区真北路',                     shop: '王小虎夫妻店',                     shopId: '10333'                 }, {                     id: '12987125',                     name: '好滋好味鸡蛋仔',                     category: '江浙小吃、小吃零食',                     desc: '荷兰优质淡奶,奶香浓而不腻',                     address: '上海市普陀区真北路',                     shop: '王小虎夫妻店',                     shopId: '10333'                 }, {                     id: '12987126',                     name: '好滋好味鸡蛋仔',                     category: '江浙小吃、小吃零食',                     desc: '荷兰优质淡奶,奶香浓而不腻',                     address: '上海市普陀区真北路',                     shop: '王小虎夫妻店',                     shopId: '10333'                 }],                     // 要展开的行,数值的元素是row的key值                 expands: []             }         },         methods:{          //在<table>里,我们已经设置row的key值设置为每行数据id:row-key="id"             rowClick(row, event, column) {                 Array.prototype.remove = function (val) {                     let index = this.indexOf(val);                     if (index > -1) {                         this.splice(index, 1);                     }                 };                   if (this.expands.indexOf(row.id) < 0) {                     this.expands.push(row.id);                 else {                     this.expands.remove(row.id);                 }               }         }       } </script>
上一篇:Zookeeper UI管理界面安装


下一篇:修改 CubeMX 生成的 RT-Thread makefile 工程