vue2 el-table中查询某一字段相同的所有项，并返回这些项中的某一字段

可以使用JavaScript的Array.filter()方法和Array.map()方法实现这个功能。

假设要查询的字段为"name"，要返回的字段为"value"，那么代码如下：

// 假设数据保存在data数组中
const data = [
  { id: 1, name: 'A', value: 'a1' },
  { id: 2, name: 'A', value: 'a2' },
  { id: 3, name: 'B', value: 'b1' },
  { id: 4, name: 'C', value: 'c1' },
  { id: 5, name: 'C', value: 'c2' },
]

// 查询name为"A"的所有项，并返回它们的value字段
const result = data.filter(item => item.name === 'A').map(item => item.value)

console.log(result) // ["a1", "a2"]

首先使用filter()方法查询出所有name为"A"的项，然后使用map()方法返回它们的value字段组成的数组。

相关问题

vue中vxe-table中根据某一个字段合并单元格后按钮也合并成一个按钮

你可以使用`span-method`来合并单元格，并在合并后的单元格里渲染一个自定义的组件，这个组件里可以根据合并的单元格数据来渲染一个合并后的按钮。

以下是示例代码：

<template>
  <vxe-table :data="tableData" :span-method="spanMethod">
    <vxe-table-column prop="id" title="ID"></vxe-table-column>
    <vxe-table-column prop="name" title="姓名"></vxe-table-column>
    <vxe-table-column prop="age" title="年龄"></vxe-table-column>
    <vxe-table-column title="操作">
      <template slot-scope="{row}">
        <my-merge-btn :row="row"></my-merge-btn>
      </template>
    </vxe-table-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 },
        { id: 3, name: '王五', age: 24 },
        { id: 4, name: '赵六', age: 20 },
        { id: 5, name: '钱七', age: 22 },
        { id: 6, name: '孙八', age: 24 }
      ]
    }
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 && (rowIndex === 0 || row.id !== this.tableData[rowIndex - 1].id)) {
        let rowspan = 1
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (this.tableData[i].id === row.id) {
            rowspan++
          } else {
            break
          }
        }
        return {
          rowspan,
          colspan: 1
        }
      }
    }
  },
  components: {
    'my-merge-btn': {
      props: ['row'],
      template: `
        <div>
          <el-button @click="handleClick(row, 'edit')">编辑</el-button>
          <el-button @click="handleClick(row, 'delete')">删除</el-button>
        </div>
      `,
      methods: {
        handleClick(row, action) {
          console.log(`点击了${action}按钮，当前行数据为：`, row)
        }
      }
    }
  }
}
</script>

在上面的示例代码中，我们使用`span-method`来合并单元格，并在合并后的单元格里渲染一个自定义的组件`my-merge-btn`，这个组件里可以根据合并的单元格数据来渲染一个合并后的按钮。

注意，在`span-method`中，我们需要返回一个对象，指定合并的单元格所占的行数和列数，这样才能正确地合并单元格。

同时，在自定义组件`my-merge-btn`中，我们需要使用`props`来接收当前行的数据`row`，然后根据这个数据来渲染按钮，并在按钮的`click`事件中调用父组件的方法来处理点击事件。

vue2项目中对el-table表格中对输入框字段进行校验

在 Vue2 中对 `el-table` 表格中的输入框字段进行校验，可以使用自定义校验规则和事件处理函数来实现。以下是一个简单的示例：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" @blur="validateName(scope.row)" :error="scope.row.nameError"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      <el-input v-model.number="scope.row.age" @blur="validateAge(scope.row)" :error="scope.row.ageError"></el-input>
    </template>
  </el-table-column>
</el-table>

在上面的示例中，我们使用了 `el-input` 组件作为表格中的输入框，并通过 `v-model` 指令绑定到表格数据中的相应字段。同时，我们还为输入框绑定了 `blur` 事件，用于在输入框失去焦点时进行校验。

接下来，我们需要在 Vue 实例中定义校验规则和事件处理函数：

export default {
  data() {
    return {
      tableData: [
        { name: '', age: '' },
        { name: '', age: '' }
      ]
    }
  },
  methods: {
    validateName(row) {
      if (!row.name) {
        row.nameError = '姓名不能为空'
      } else {
        row.nameError = ''
      }
    },
    validateAge(row) {
      if (!row.age) {
        row.ageError = '年龄不能为空'
      } else if (isNaN(row.age) || row.age < 0 || row.age > 150) {
        row.ageError = '年龄必须是0到150之间的数字'
      } else {
        row.ageError = ''
      }
    }
  }
}

在上面的示例中，我们分别定义了 `validateName` 和 `validateAge` 两个事件处理函数，用于对姓名和年龄字段进行校验。在这两个函数中，我们根据字段的值进行不同的校验操作，并将校验结果保存到表格数据中的 `nameError` 和 `ageError` 字段中。表格数据中的 `error` 属性可以用于控制输入框下方的错误提示信息。