1

我试图在表格中显示有关某个项目的信息，在这种情况下它是一个问题，诸如它属于哪个部分的信息，这是响应类型，以及问题是否是可选的。

现在我只能显示像section_id,response_type_id和optional. 我想显示前两个的名称，例如section: school，response_type: text对于可选的，它不是另一个表的 id 而是布尔值，我想显示它optional: yes。

如果在我的桌子上我打电话scope.row来看看我有什么这只是关于问题本身的信息

question
section_id
response_type_id
optional

此信息很有用，但我想用它来提供部分的名称和响应的类型名称。在可选中，我希望能够显示是或否而不是 1 或 0。

这是我的控制器代码

public function index()
{
    return Inertia::render('Question/Index', [
        'survey_question' => SurveyQuestion::all(),
        'survey_section' => SurveySection::all(),
        'response_type' => ResponseType::all(),
        'options' => SurveyQuestionOption::all()
    ]);

}

如果我查看 Vue DevTools，我可以看到那些充满数据的数组，但我不确定如何访问它。

这是我的桌子

<el-table
    :data="survey_questions">
        <el-table-column
            prop="question"
            label="Pregunta">
        </el-table-column>
        <el-table-column
             prop="survey_section_id"
             label="Seccion">
        </el-table-column>
        <el-table-column
              prop="response_type_id"
              label="Tipo de Respuesta">
         </el-table-column>
         <el-table-column
              prop="optional"
              label="Opcional">
          </el-table-column>
</el-table>

如果我将道具更改为类似这样的东西，则没有任何显示，它只是空的，或者我收到这样的错误

<el-table-column
    label="Seccion">
        <template slot-scope="scope">
            <p> {{ scope.row.survey_section.title }} </p>
        </template>
</el-table-column>

Error in render: "TypeError: Cannot read property 'title' of undefined"
4

1 回答 1

0

我会使用formatter：https ://element.eleme.io/#/en-US/component/table#table-column-attributes

在您的代码中，它看起来像这样：

<el-table
    :data="survey_questions">
        <el-table-column
            prop="question"
            label="Pregunta">
        </el-table-column>
        <el-table-column
             prop="survey_section_id"
             label="Seccion"
             :formatter="surveyFormatter">
        </el-table-column>
        <el-table-column
              prop="response_type_id"
              label="Tipo de Respuesta">
         </el-table-column>
         <el-table-column
              prop="optional"
              label="Opcional"
              :formatter="optionalFormatter">
          </el-table-column>
</el-table>

<script>
  export default {
    data() {
      return {...}
    },
    methods: {
      surveyFormatter(row, column, cellValue) {
        return row.survey_section.title;
      }, 
      optionalFormatter(row, column, cellValue) {
        return cellValue ? 'yes' : 'no';
      }
    }
  }
</script>
于 2019-10-14T21:09:38.890 回答