poojakumawat1 Ответов: 0

Я пытаюсь отредактировать флажок с помощью devextream для кода vue js. Но его нельзя редактировать.он находится в удобочитаемом формате

У меня есть один data.js и приложение.vue.
Я использовал DevExtream для отображения пользовательского интерфейса. Он имеет в виду data.js для ввода данных
но флажки находятся в удобном для чтения формате. Я хочу, чтобы он был в редактируемом формате.

Что я уже пробовал:

export const statuses = [{ 'id': 1, 'name': 'Not Started', 'profile':true }, { 'id': 2, 'name': 'In Progress', 'profile':true }, { 'id': 3, 'name': 'Deferred', 'profile':false }, { 'id': 4, 'name': 'Need Assistance', 'profile':true }, { 'id': 5, 'name': 'Completed', 'profile':true }];


<template>
  <DxDataGrid
    :data-source="statuses"
    :show-borders="true"
  >

    <DxEditing
      :allow-updating="true"
      :allow-adding="true"
      mode="cell"
    />
    <DxColumn
      :width="150"
      :allow-sorting="false"
      data-field="name"
    >

      <DxRequiredRule/>
    </DxColumn>
    <DxColumn
      :width="150"
      data-field="profile"
    >
         <DxCheckBox :value="false"/>
        <DxRequiredRule/>
      </DxColumn>
  </DxDataGrid>
</template>
<script>

import {
  DxDataGrid,
  DxPaging,
  DxHeaderFilter,
  DxSearchPanel,
  DxEditing,
  DxColumn,
  DxLookup,
  DxRequiredRule,
    DxCheckBox
} from 'devextreme-vue';
import { statuses } from './data.js';
App.vue: 
export default {
  components: {
    DxDataGrid,
    DxPaging,
    DxCheckBox,
    DxHeaderFilter,
    DxSearchPanel,
    DxEditing,
    DxColumn,
    DxLookup,
    DxRequiredRule
  },
  data() {
    return {

      statuses: statuses


    };
  },
  methods: {

  }
};
</script>
<style>
  .status-icon {
    height: 16px;
    width: 16px;
    display: inline-block;
    margin-right: 8px;
  }

  .middle {
    vertical-align: middle;
  }
</style>

0 Ответов