我们可以在element-ui下拉列表的command属性中传递vue数据对象吗？

编程问答 2022-06-11

问题描述

HTML 

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">{{fields}} 1</el-dropdown-item>
    <el-dropdown-item command="b">Action 2</el-dropdown-item>
    <el-dropdown-item command="c">Action 3</el-dropdown-item>
    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</div>

JS文件

var Main = {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    },data() {
        return {
            fields: 'test'
        }
  }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

上面的示例来自https://element.eleme.io/#/en-US/component/dropdown#dropdown 这是此https://codepen.io/pen/?&editable=true=https%3A%2F%2Felement.eleme.io%2F

的代码笔

因此，我试图将js文件中的“字段”数据传递给{{fields}} 1中的命令属性，而不是“ a”。我的假设是使用两个大括号传递，但我认为command属性仅包含一个字符串。任何想法？谢谢。

解决方法

您可以将对象传递给命令选项，但是必须在public JdbcCursorItemReader<Assessment> getReader(DataSource dataSource,String query) { return new JdbcCursorItemReaderBuilder<Assessment>() .dataSource(dataSource) .name("AssessmentUtilityReader") // can be passed as a parameter as well .sql(query) .rowMapper(new AssessmentMapper()) .build(); } 之前添加冒号

command

JS 

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item :command="{action: 'a',fields: fields}">{{fields}} 1</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</div>
frontendvue-component