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,也能得到整个项目。