el-table绑定纯字符串数组

`el-table` 是 Element UI 中的一个表格组件，它常用于展示数据列表。如果你想绑定一个纯字符串数组到 `el-table` 的 `data` 属性，首先你需要创建一个包含字符串的数据数组，例如：

let stringArray = [
  '数据1',
  '数据2',
  '数据3',
  // ... 更多字符串
];

然后，在你的 Vue 组件模板中，你可以直接将这个数组赋值给 `el-table` 的 `data` prop：

<template>
  <el-table :data="stringArray">
    <!-- table列配置 -->
    <el-table-column property="item" label="字符串"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      stringArray: ['数据1', '数据2', '数据3'], // 或者你从服务端获取的数据
    };
  },
};
</script>

这里假设你有一个 `item` 列用来显示字符串内容。当你需要更新数组时，只需要改变 `stringArray` 数组即可。

相关问题

el-table的多选通过数组中的一个值为true默认选中状态

可以通过el-table的`row-class-name`属性和`custom-row`插槽来实现这个功能。

首先，在el-table上设置`row-class-name`属性，指定一个函数用于动态设置每一行的样式类。例如：

<el-table :data="tableData" row-class-name="rowClassName">
  ...
</el-table>

在`rowClassName`函数中，判断当前行的数据对象中，指定多选状态的属性是否为true，如果为true，返回一个样式类名，否则返回空字符串。例如：

export default {
  methods: {
    rowClassName({ row }) {
      return row.selected ? 'is-selected' : '';
    }
  }
}

然后，在el-table上添加一个`custom-row`插槽，用于自定义每一行的内容。在插槽内部添加一个el-checkbox组件，绑定到指定多选状态的属性上。例如：

<el-table :data="tableData" row-class-name="rowClassName">
  <template v-slot:custom-row="{row}">
    <el-checkbox v-model="row.selected"></el-checkbox>
  </template>
  ...
</el-table>

这样，在加载el-table时，如果有指定多选状态的数据对象中的属性为true，那么对应的行就会默认选中。

注意：在这个例子中，我们假设数据对象中有一个`selected`属性，用于指定多选状态。如果你的数据对象中没有这个属性，需要根据实际情况进行修改。

el-table按需导出

要实现 el-table 的按需导出，可以按照以下步骤进行：

1. 将需要导出的数据存放在一个数组中，并将该数组作为 el-table 的 data 属性绑定。

2. 在 el-table 中添加一个 slot="header" 的表头插槽，并在该插槽中添加一个导出按钮。

3. 在导出按钮的点击事件中，使用 FileSaver.js 库将数据导出为 Excel 文件。

以下是一个示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表头插槽 -->
      <template slot="header">
        <el-button type="primary" @click="exportTable">导出</el-button>
      </template>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' }
      ]
    };
  },
  methods: {
    // 导出表格
    exportTable() {
      // 导出的文件名
      const fileName = '表格数据.xlsx';

      // 表头数据
      const header = ['姓名', '年龄', '地址'];

      // 表格数据
      const data = this.tableData.map(item => [item.name, item.age, item.address]);

      // 创建一个 Workbook 对象
      const wb = XLSX.utils.book_new();

      // 创建一个 Worksheet 对象
      const ws = XLSX.utils.aoa_to_sheet([header, ...data]);

      // 将 Worksheet 添加到 Workbook
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      // 将 Workbook 导出为 Excel 文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
      saveAs(blob, fileName);
    }
  }
};

// 字符串转 ArrayBuffer
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xff;
  }
  return buf;
}
</script>

在上述代码中，我们使用了 XLSX.js 库将数据导出为 Excel 文件。在导出按钮的点击事件中，我们首先定义了导出的文件名、表头数据和表格数据，然后创建了一个 Workbook 对象和一个 Worksheet 对象，并将 Worksheet 添加到 Workbook 中。最后，我们将 Workbook 导出为二进制数据，并使用 FileSaver.js 库将其保存为 Excel 文件。