Я пытаюсь отредактировать флажок с помощью devExtream для кода vue js. но он не редактируемый. он в читаемом формате - PullRequest
Новая
       71

Я пытаюсь отредактировать флажок с помощью devExtream для кода vue js. но он не редактируемый. он в читаемом формате

0 голосов
/ 06 мая 2020

Я хочу, чтобы флажок профиля был в редактируемом формате. Это файл приложения. Vue, а для ввода я имею в виду файл data. js. Я также прикрепил вывод, но флажок находится в удобочитаемом экспорте 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>
...