vue 判断表格字段没有值 button不能点击

你可以在表格中的字段上绑定一个计算属性，这个计算属性会根据该字段是否有值来返回一个布尔值。然后你可以使用这个布尔值来控制按钮的禁用状态。

例如，假设你的表格数据是一个数组 `tableData`，其中每个元素都有一个 `name` 字段。你想要当某个元素的 `name` 字段为空时，让对应的按钮不能点击。你可以这样做：

在你的表格列定义中，为 `name` 字段绑定一个计算属性 `hasName`，它会根据该字段是否有值来返回一个布尔值：

<el-table-column prop="name">
  <template #default="scope">
    <span>{{ scope.row.name }}</span>
  </template>
  <template #header>
    <span>名称</span>
  </template>
</el-table-column>

computed: {
  hasName() {
    return this.tableData.some(item => !!item.name)
  }
}

然后，你可以将这个计算属性绑定到按钮的 `:disabled` 属性上，来控制按钮的禁用状态：

<el-button :disabled="!hasName">保存</el-button>

这样，当 `tableData` 中所有元素的 `name` 字段都为空时，按钮会自动被禁用。

相关问题

vue3 vxe多级表头可编辑表单全量数据校验 根据数组循环出来的两个表格 校验判断值不能为空 附代码

好的，以下是一个示例代码，使用了 Vue3 和 VXE-Table 进行多级表头可编辑表单全量数据校验：

<template>
  <div>
    <vxe-grid ref="grid1" :columns="columns1" :data="data1" edit-config="{trigger: 'click'}"></vxe-grid>
    <vxe-grid ref="grid2" :columns="columns2" :data="data2" edit-config="{trigger: 'click'}"></vxe-grid>
    <button @click="validateData">校验数据</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import XEUtils from 'xe-utils'
import VXEGrid from 'vxe-table-3/lib/grid'
import 'vxe-table-3/lib/style.css'

export default defineComponent({
  components: {
    VXEGrid
  },
  setup() {
    const columns1 = [
      {
        title: '姓名',
        children: [
          {
            title: '姓',
            field: 'firstName',
            width: 120,
            editable: true
          },
          {
            title: '名',
            field: 'lastName',
            width: 120,
            editable: true
          }
        ]
      },
      {
        title: '性别',
        field: 'gender',
        width: 80,
        editable: true
      }
    ]
    const columns2 = [
      {
        title: '学科',
        children: [
          {
            title: '数学',
            field: 'math',
            width: 100,
            editable: true
          },
          {
            title: '语文',
            field: 'chinese',
            width: 100,
            editable: true
          }
        ]
      },
      {
        title: '总分',
        field: 'total',
        width: 80,
        editable: false
      }
    ]
    const data1 = [
      {
        firstName: '张',
        lastName: '三',
        gender: '男'
      },
      {
        firstName: '李',
        lastName: '四',
        gender: '女'
      }
    ]
    const data2 = [
      {
        math: '',
        chinese: '',
        total: ''
      }
    ]
    const validateData = () => {
      const grid1 = XEUtils.get(this, '$refs.grid1.$xegrid')
      const grid2 = XEUtils.get(this, '$refs.grid2.$xegrid')
      let isValid = true
      grid1.getTableData().forEach(row => {
        if (!row.firstName || !row.lastName || !row.gender) {
          grid1.setActiveCell({ row, column: { property: 'firstName' } })
          isValid = false
          return false
        }
      })
      if (!isValid) return
      grid2.getTableData().forEach(row => {
        if (!row.math || !row.chinese) {
          grid2.setActiveCell({ row, column: { property: 'math' } })
          isValid = false
          return false
        }
        row.total = parseInt(row.math) + parseInt(row.chinese)
      })
      if (!isValid) return
      console.log('数据校验通过')
    }
    return {
      columns1,
      columns2,
      data1,
      data2,
      validateData
    }
  }
})
</script>

在这个示例中，我们使用了 VXE-Table 的 Grid 组件来展示两个表格，分别是 `grid1` 和 `grid2`。这两个表格的列定义分别是 `columns1` 和 `columns2`，数据分别是 `data1` 和 `data2`。

当用户点击“校验数据”按钮时，我们会分别遍历这两个表格的数据，判断每一行数据中的必填字段是否为空。如果有必填字段为空，我们会将焦点定位到第一个空字段的单元格上，并提示用户该字段不能为空。如果所有必填字段都不为空，我们会计算出每一行数据的总分，并把总分填入相应的单元格中。

最后，如果所有数据的校验都通过，则会在控制台输出“数据校验通过”。

纯VUE实现自定义字段导出EXCEL

A：

实现自定义字段导出EXCEL可以分为以下几个步骤：

1.构建表格数据：首先需要从后台获取表格数据，将其构建成一个二维数组，同时需要定义表头等相关参数。

2.创建表格对象：使用第三方库（如xlsx）创建表格对象，设置表格标题等相关参数。

3.填充表格数据：循环将表格数据中的每个元素写入表格中。可以根据需要导出的字段，只填充特定的列。

4.导出表格文件：使用FileSaver.js等库将表格文件保存到本地。

下面是一个纯VUE实现自定义字段导出EXCEL的示例代码：

<template>
<div>
<button @click="exportExcel">导出Excel</button>
</div>
</template>

<script>
import { utils, writeFile } from 'xlsx';

export default {
data() {
return {
tableData: [
['姓名', '年龄', '性别', '城市'],
['张三', 18, '男', '北京'],
['李四', 20, '女', '上海'],
],
};
},
methods: {
exportExcel() {
const headers = ['姓名', '性别']; // 自定义导出的字段
const data = this.tableData.map(item => {
return headers.map(key => item[key]);
});
data.unshift(headers); // 表头数据

const ws = utils.aoa_to_sheet(data);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, 'Sheet1');
const fileName = '表格数据.xlsx';
writeFile(wb, fileName);
},
},
};
</script>

上面的示例代码使用了xlsx库来创建和填充表格数据。需要注意的是，该库默认只支持浏览器环境。如果需要在Node.js环境中使用，可以考虑使用node-xlsx库。