Question

如何在v-data-table中突出显示所选行？我试图通过在Example

中添加标志变量selected来修改数据

在上面的示例中，单击一行将通过添加名为primary的类来突出显示。如果它是静态数据，则工作正常，但如果它是动态数据，例如从API获取数据，则如果我更改了分页和排序等所有内容，则数据表中的数据将始终被刷新。

例如，在我的情况下，如果我对列进行排序，则数据将来自API，而v-data-table中的数据将被排序后的数据刷新，在这种情况下，很难维持{{ 1}}每次数据更改时都进行标记。还有其他方法来突出显示所选行吗？

Answer 1

  import spark.sqlContext.implicits._
  import java.sql.Timestamp
import org.apache.spark.sql.functions.typedLit


scala>   val stamp = typedLit(new Timestamp(1580105949000L))
stamp: org.apache.spark.sql.Column = TIMESTAMP('2020-01-27 00:19:09.0')


scala>   var df_test = Seq(5).toDF("seq").select(
     |     stamp.as("unixtime"),
     |     date_trunc("HOUR", stamp).as("date_trunc"),
     |     date_format(date_trunc("HOUR", stamp), "yyyy-MM-dd hh:mm:ss").as("hour")
     |   )
df_test: org.apache.spark.sql.DataFrame = [unixtime: timestamp, date_trunc: timestamp ... 1 more field]


scala> df_test.show
+-------------------+-------------------+-------------------+
|           unixtime|         date_trunc|               hour|
+-------------------+-------------------+-------------------+
|2020-01-27 00:19:09|2020-01-27 00:00:00|2020-01-27 12:00:00|
+-------------------+-------------------+-------------------+

或

<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {      
      row.select(true);
      //item.name - selected id
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>

示例 https://codepen.io/nicolai-nikolai/pen/GRgLpNY

Answer 2

您的解决方案不起作用，因为在单击行时将selected属性添加到数据中，但是当重新加载数据时，没有selected属性的数据将替换旧数据。 / p>

要使其正常工作：
-将id字段添加到甜点列表中的每个项目
-将默认值为-1的selectedId添加到您的数据中
-将方法activerow中的代码行更改为this.selectedId = item.id;
-将<tr>中的class属性更改为:class="{'primary': props.item.id===selectedId}"

如果仅在上重新加载，您的甜点列表会更改，并且新列表中包含与以前选择的ID相同的商品，则应该选择同一行。

我分叉了代码笔示例，以向您展示其工作原理：
https://codepen.io/anon/pen/PrWjxQ?editors=1010

Answer 3

其他人都已经说明了如何使行可单击，但是没有说明如何切换行选择。可以通过isSelected检查选择状态，然后进行相应设置。

要正确设置所选行的样式，您还需要考虑其他因素：深色和浅色主题和hover CSS伪类-通过important标签覆盖此伪类，因此我们需要重新设置样式它。

Check out the Codepen Example

methods: {
    rowClick: function (item, row) {      
      let selectState = (row.isSelected) ? false : true;
      row.select(selectState);
    }
}


<style>
    .theme--light.v-data-table tbody tr.v-data-table__selected {
        background: #f5c17d70 !important;
    }
    .theme--dark.v-data-table tbody tr.v-data-table__selected {
        background: #a17b4970 !important;
    }
    .theme--dark.v-data-table tbody tr.v-data-table__selected:hover {
        background: #a17b49c2 !important;
    }
    .theme--light.v-data-table tbody tr.v-data-table__selected:hover {
        background: #ffd296d2 !important;
    }
</style>

Vuetify-如何突出显示v-data-table中的点击行

3 个答案: