来一个完整代码示例 vue2中保留表格样式导入及导出 可编辑表格

非常抱歉，我之前理解成了一个npm相关的问题，现在我明白您的问题了。以下是一个Vue 2的可编辑表格示例，包括导入和导出表格数据，并保留表格样式。

HTML模板代码：

<template>
  <div>
    <button @click="exportTable">导出表格</button>
    <input type="file" ref="file" style="display:none" @change="importTable" />
    <button @click="() => { this.$refs.file.click() }">导入表格</button>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td :contenteditable="item.editable" @input="editTableData(index, 'name', $event.target.innerText)">{{ item.name }}</td>
          <td :contenteditable="item.editable" @input="editTableData(index, 'age', $event.target.innerText)">{{ item.age }}</td>
          <td :contenteditable="item.editable" @input="editTableData(index, 'gender', $event.target.innerText)">{{ item.gender }}</td>
          <td>
            <button @click="toggleEdit(index)">{{ item.editable ? '保存' : '编辑' }}</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

JS代码：

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男', editable: false },
        { name: '李四', age: 22, gender: '女', editable: false },
        { name: '王五', age: 25, gender: '男', editable: false },
      ]
    }
  },
  methods: {
    toggleEdit(index) {
      this.tableData[index].editable = !this.tableData[index].editable
    },
    editTableData(index, key, value) {
      this.tableData[index][key] = value
    },
    exportTable() {
      const table = document.querySelector('table')
      const tableHtml = table.outerHTML
      const exportHref = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(tableHtml)))
      const link = document.createElement('a')
      link.href = exportHref
      link.download = 'table.xls'
      link.click()
    },
    importTable() {
      const file = this.$refs.file.files[0]
      const reader = new FileReader()
      reader.onload = (event) => {
        const tableHtml = event.target.result
        const parser = new DOMParser()
        const table = parser.parseFromString(tableHtml, 'text/html').querySelector('table')
        const tableData = []
        table.querySelectorAll('tr').forEach((tr, index) => {
          if (index > 0) {
            const tds = tr.querySelectorAll('td')
            tableData.push({
              name: tds[0].innerText,
              age: tds[1].innerText,
              gender: tds[2].innerText,
              editable: false
            })
          }
        })
        this.tableData = tableData
      }
      reader.readAsText(file)
    }
  }
}
</script>

这个示例包含了一个table元素，其中包含了表头和表数据。表格数据是一个数组，每行数据都是一个对象。在表格中，我们使用了v-for指令来遍历这个数组，并渲染每行数据。每行数据都包含了一个可编辑的td元素，并且有一个编辑和保存按钮，用于控制td元素是否可编辑。

导出表格数据的方法是将table元素的outerHTML转成base64编码的字符串，然后创建一个a标签，并设置href和download属性，最后调用click方法触发下载。

导入表格数据的方法是通过一个input元素来获取用户选择的文件，然后使用FileReader对象将文件读取为文本字符串。接下来，我们使用DOMParser对象将文本字符串转换成HTML文档对象，并从中获取table元素和其中的数据。最后，我们将表格数据更新到Vue实例的data中，然后表格会自动更新渲染。

希望这个示例能够帮助到您。