• elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身

    直接上代码了没什么可讲的,主要是用到

    row-key="id"

    :expand-row-keys="expands

    @row-click="handleRowClick"

    2.  
    3. <script>
    4.   import rectifyEdit from './components/rectify-edit.vue';
    5.   import rectifyCorrectEdit from './components/rectify-correct-edit.vue';
    6.   import rectifySearch from './components/rectify-search.vue';
    7.   import { pageDisposalOrders } from '@/api/disposal/disposal-order';
    8.   export default {
    9.     name: 'rectify',
    10.     components: {
    11.       rectifySearch,
    12.       rectifyCorrectEdit,
    13.       rectifyEdit
    14.     },
    15.     data() {
    16.       return {
    17.         showEdit: false,
    18.         showCorrectEdit: false,
    19.         columns: [
    20.           {
    21.             width: 45,
    22.             type: 'expand',
    23.             columnKey: 'expand',
    24.             align: 'center',
    25.             slot: 'expand'
    26.           },
    27.           {
    28.             prop: 'code',
    29.             label: '处置单编号',
    30.             sortable: 'custom',
    31.             showOverflowTooltip: true,
    32.             width: 220
    33.           },
    34.           {
    35.             prop: 'orderType',
    36.             label: '任务类型',
    37.             showOverflowTooltip: true,
    38.             minWidth: 110,
    39.             slot: 'orderType',
    40.             formatter: (_row, _column, cellValue) => {
    41.               return this.$globalDictName('order_type', cellValue);
    42.             }
    43.           },
    44.           {
    45.             prop: 'superviseType',
    46.             label: '监督方式',
    47.             sortable: 'custom',
    48.             slot: 'superviseType',
    49.             minWidth: 140
    50.           },
    51.           {
    52.             prop: 'orgName',
    53.             label: '监督站',
    54.             sortable: 'custom',
    55.             showOverflowTooltip: true,
    56.             minWidth: 140
    57.           },
    58.           {
    59.             prop: 'unitCode',
    60.             label: '生产单位',
    61.             sortable: 'custom',
    62.             showOverflowTooltip: true,
    63.             width: 180,
    64.             formatter: (_row, _column, cellValue) => {
    65.               return this.$globalOrgName(cellValue);
    66.             }
    67.           },
    68.           {
    69.             prop: 'description',
    70.             label: '任务描述',
    71.             sortable: 'custom',
    72.             showOverflowTooltip: true,
    73.             minWidth: 140
    74.           },
    75.           {
    76.             prop: 'findDate',
    77.             label: '监督日期',
    78.             sortable: 'custom',
    79.             showOverflowTooltip: true,
    80.             width: 180,
    81.             formatter: (_row, _column, cellValue) => {
    82.               return this.$util.toDateString(cellValue, 'yyyy-MM-dd');
    83.             }
    84.           }
    85.         ],
    86.         current: {},
    87.         currentCorrect: {},
    88.         expands: [],
    89.         currentRow: null
    90.       };
    91.     },
    92.     created() {},
    93.     methods: {
    94.       handleRowClick(row) {
    95.         if (this.expands.includes(row.id)) {
    96.           this.expands = this.expands.filter((val) => val !== row.id);
    97.         } else {
    98.           this.expands = [];
    99.           this.expands.push(row.id);
    100.         }
    101.       },
    102.  
    103.       handleCurrentChange(val) {
    104.         this.currentRow = val;
    105.       },
    106.       /* 表格数据源 */
    107.       datasource({ page, limit, where, order }) {
    108.         let statusList = null; //'(0,-1,-2)';
    109.         return pageDisposalOrders({
    110.           ...where,
    111.           ...order,
    112.           page,
    113.           limit,
    114.           auditStatus: 0,
    115.           rectifyStatus: 0,
    116.           statusIds: statusList
    117.         });
    118.  
    119.         // return data;
    120.       },
    121.       getDictName(type, code) {
    122.         return this.$globalDictName(type, code);
    123.       },
    124.       /* 刷新表格 */
    125.       reload(where) {
    126.         this.$refs.table.reload({ where: where });
    127.       },
    128.       /* 打开所有记录 */
    129.       openEdit(row) {
    130.         this.current = row;
    131.         this.showEdit = true;
    132.       },
    133.       toCorrect(row) {
    134.         this.currentCorrect = row;
    135.         this.showCorrectEdit = true;
    136.       }
    137.     }
    138.   };
    139. script>

  • 相关阅读:
    按照Gartner的概念，国内所谓低代码产品都是“伪低代码”——到底什么才是“低代码”？
    【通信原理课设--基于MATLAB/Simulink的2ASK数字带通传输系统建模与仿真】Simulink的使用介绍以及在本实验中的使用
    金额转大写查询易语言代码
    实例001：数字组合 有四个数字：1、2、3、4，能组成多少个互不相同且无重复数字的三位数？各是多少？
    js：对dom元素class属性进行读取、更新、移除操作
    win10彻底禁用wsappx的方法
    GPTZero：论文打假神器
    uniapp 触底加载
    flash-linear-attention CUDA算子成功实现（但限制极多。。）
    Etcd 常用命令与备份恢复
  • 原文地址：https://blog.csdn.net/weixin_54930261/article/details/139826679