@Daniil161rus

Как подсветить строку или колонку в которой курсор активен(vue-excel-editor)?

Нужно сделать подсветку строки и колонки в которой курсор активен
<template>
    <vue-excel-editor v-model="jsondata">
        <vue-excel-column field="user"   label="User" />
        <vue-excel-column field="name"   label="Name" />
        <vue-excel-column field="phone"  label="Contact" />
        <vue-excel-column field="gender" label="Gender" />
        <vue-excel-column field="age"    label="Age" />
        <vue-excel-column field="birth"  label="Date Of Birth" />
    </vue-excel-editor>
</template>


как тут -> 61f938267ae9c917272182.gif
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
data: () => ({
  columns: [
    { field: '...', label: '...' },
    { field: '...', label: '...' },
    ...
  ],
  focused: {},
  ...
}),
methods: {
  rowStyle(row) {
    return row === this.focused.record && {
      backgroundColor: 'red',
    };
  },
  cellStyle(row, cell) {
    return cell.name === this.columns[this.focused.colPos]?.field && {
      backgroundColor: 'orange',
    };
  },
},


<vue-excel-editor
  :row-style="rowStyle"
  :cell-style="cellStyle"
  @cell-focus="focused = $event"
  ...
>
  <vue-excel-column
    v-for="n in columns"
    v-bind="n"
    :key="n.field"
  />
</vue-excel-editor>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы