Vuetify :: 以编程方式打开细节行

对于即将发布的PiCockpit v2.0版本,我正在准备一个GPIO应用程序。

GPIO条目是表格行--为了配置它们,我们希望能够通过点击配置按钮来访问详细行。

形象

点击雪佛龙或配置按钮将导致详细行的打开。

形象

这里是相应的Vue模板。

<v-data-table
   :headers="gpioInputTableHeaders"
   :items="gpioInputTableData"
   :加载="加载"
   item-key="bcm_id"
   loading-text="等待数据..."
   固定页眉
  显示-展开
   :expanded.sync="gpioInputTableExpanded"

   class="elevation-1
>
   。
     <span v-if="”!onlineStateBinary”"><i class="”fa" fa-warning”></i> </span>
     <span v-if="”item.state" ><v-icon x-small>mdi-arrow-up-bold</v-icon>{{item.high}}}。</span>
     <span v-else-if="”item.state" ><v-icon x-small>mdi-arrow-down-bold</v-icon>{{item.low}}。</span>
     <span v-else-if="”item.state" >不适用</span>
     <span v-else-if="”item.state" >不适用</span>
     <span v-else>错误</span>
   </template>
   <template v-slot:item.action="{ item }">
     <v-btn
       class="mr-2
       color="primary"
       小
       @click.ctrl.exact="configGpioAll('input', item)"
       @click.exact="configGpio('input', item)"

     >
       mdi-hammer-wrench。
       配置
     </v-btn>
     <v-btn
       class="mr-2
       color="error"
       小
       @click="remove_gpio('input', item.bcm_id)"
     >
       mdi-trash-can-outline。
       移除
     </v-btn>
   </template>
   。
     <!– v-on:pull-change=”pullChange” –>
     <td :colspan="”headers.length”">
       <gpioInputDetailRow
         :rowData="item"
         v-on:pull-change="pullChange"
         v-on:debounce-change="debounceChange"
       >。
     </td>
   </template>       
</v-data-table>        

正如你所看到的,我为扩展项槽包裹了另一个组件。这个组件与我们目前的讨论无关,因此我没有提供它的代码。

我已经强调了上面的重要部分。

这些是。

  • :items="gpioInputTableData" - 这将数据链接到Vuetify数据表的项目键。
  • item-key="bcm_id" - 这对于为你的数据的每一个条目提供一个唯一的键是很重要的(这是以数组的形式提供给项目)。
    • 如果你省略了这一设置,你所有的细节行都会一次打开,一次关闭。
    • 值应该是唯一的,正如我们讨论的那样;如果你的数据在所有的键上都有重复的值,你需要在其中创建一个额外的唯一键。
  • 显示-扩展 - 这将显示雪佛龙的情况 形象
  • :expanded.sync="gpioInputTableExpanded" - 注意使用同步修饰符,以使变化同步回来!这是一个变量,用来存储当前展开的项目。

然后。

  •  @click.ctrl.exact="configGpioAll('input', item)" - 正如你所看到的,在Ctrl + Click时,我正在调用一个实用函数来切换所有的扩展槽,这取决于当前项目的状态。我把项目传给它,它要被扩展
  • @click.exact="configGpio('input', item)" - 正如你所看到的,在一次精确的点击中,我调用了另一个实用的函数(我们很快就会提到这些),ALSO传入当前的项目

最后。

  • - 这个Slot容纳了扩展的项目。传入标题是很重要的。
  • <td :colspan="”headers.length”"> - ...因为它允许你创建一个跨越所有列的单元格

下面是我的data()的样子(摘录)。

数据() {
   返回 {
     装载:真。
     gpioInputTableData:[],
     gpioInputTableHeaders:[
       { text: 'Name', value: 'name'},
       { text: 'Value', value: 'value'},
       { text: 'Action', value: 'action'}
     ],
     gpioInputTableExpanded:[]

  }
},

而这里是两个效用函数。

形象

configGpioAll: function (source, item){
         var ref = null;
         var refTable = null;
         如果(source === 'input'){
             ref = 'gpioInputTableExpanded';
             refTable = 'gpioInputTableData';
         } else if (source === 'output'){
             ref = 'gpioOutputTableExpanded';
             refTable = 'gpioOutputTableData';
         } else if (source === 'softpwm'){
             ref = 'gpioSoftPWMTableExpanded';
             refTable = 'gpioSoftPWMTableData';
         }
         // 我们是否为这个项目匹配(它是否被打开?)
        如果(this[ref].filter(e => e.bcm_id === item.bcm_id).length > 0){
           // 删除所有项目
           console.log("configGpioAll: removing")。
           this[ref] = [];
         }
         否则 {
           console.log("configGpioAll: adding")。
           //添加所有项目
           this[ref] = this[refTable];
         }
       },

在configGpioAll中,我检查我是否有输入、输出或softpwm表(以避免重复代码),并设置对适当的扩展变量的引用(见上述数据),以及表数据本身。

If the item is contained within the expanded data (I match by my unique key, bcm_id), I close all expanded items – 为此,我简单地将扩展变量设置为一个空数组.

如果该项目不包含在扩展的数据中,我就打开所有的项目,把所有的表格数据放进去。

注意:也许值得实验的是,一个只包含唯一键的对象数组是否也足以让它发挥作用。

形象

configGpio: function (source, item){
   var ref = null;
   如果(source === 'input'){
       ref = 'gpioInputTableExpanded';
   } else if (source === 'output'){
       ref = 'gpioOutputTableExpanded';
   } else if (source === 'softpwm'){
       ref = 'gpioSoftPWMTableExpanded';
   }
   如果(this[ref].filter(e => e.bcm_id === item.bcm_id).length > 0){
     // 删除该项目
     this[ref] = this[ref].filter(e => e.bcm_id !== item.bcm_id) 。
   }
   否则 {
     // 添加该项目
     this[ref].push(item)。
   }
},

在configGpio中,我做了类似的事情--但我不是删除所有项目,而是过滤并删除与我传入的bcm_id相匹配的项目。

如果该项目不存在,我就把它推到扩展变量中。

这就是我需要整个项目,而不仅仅是bcm_id的原因。我选择了在我的代码中进行对称,所以configGpioAll在技术上只需要bcm_id,也能得到整个项目。