xiaoshi_system/src/views/report/InvalidResponse/components/reasonsAndEvidence/details_2.vue

<template>
    <div class="height_100">
      <el-container>
          <!-- <el-header>
              <div class="head">
                  <el-button type="primary" size="small" v-if="isEdit" @click="cancel" class="margin-right_10">取消编辑</el-button>
                  <el-button type="primary" size="small" v-if="isEdit" @click="save" class="margin-right_10">保存</el-button>
                  <el-button type="primary" size="small" v-else @click="edit" class="margin-right_10">编辑</el-button>
              </div>
          </el-header> -->
          <el-main v-DivHeight="getDivHeight" class="Evidence_details">
            <el-table :data="tableData" border v-loading="loading" :maxHeight="tableHeight">
                <el-table-column  v-for="item in column"
                :render-header="$commonJS.renderHeaderMethods" :key="item.value" :prop="item.field" :label="item.name"
                align="center">
                    <template slot-scope="scope">
                        <my-RichText v-model="scope.row[item.value]" v-if="isEdit"></my-RichText>
                        <div class="text" v-else v-html="scope.row[item.value]"></div>
                    </template>
                </el-table-column>
            </el-table>
          </el-main>
      </el-container>
  
      
    </div>
</template>
<script>
import { getTableHeight } from '@/views/components/mixins'
export default {
  components: {},
  mixins:[getTableHeight],
  props: {},
  data() {
    return {
        tableData2:[],
        tableData:[],
        column:[],
        loading:false,
        isEdit:false,
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    async init(){
        // if(this.str){
        //     var data = JSON.parse(this.str)
        //     this.column = data.column
        //     this.tableData = data.tableData
        //     return
        // }
        var str = localStorage.getItem('details_2')
        if(str){
            var data = JSON.parse(str)
            this.column = data.column
            this.tableData = data.tableData
            return
        }
        var url = './三性表格.html'
        this.loading = true
        await fetch(url).then(res =>  res.text() ).then(data => {
            var html = data  
            const parser = new DOMParser();  
            // 解析包含 HTML 实体的字符串  
            const doc = parser.parseFromString(html, "text/html");   
            console.log(doc.body.getElementsByTagName('tr')) 
            var trList =  doc.body.getElementsByTagName('tr')
            var head = trList[0]
            console.log(head.getElementsByTagName('td'))
            var headList = head.getElementsByTagName('td')
            var column = []
            
            for(var i = 0;i<headList.length;i++){
                var obj = {
                    value:headList[i].innerText,
                    field:headList[i].innerText,
                    name:headList[i].innerText
                }
                column.push(obj)
            }
            var tableData = []
            for(var i = 1;i<trList.length;i++){
                var bodyList = trList[i].getElementsByTagName('td')
                var obj = {}
                for(var j = 0;j<bodyList.length;j++){
                    obj[headList[j].innerText] = bodyList[j].innerHTML
                }
                tableData.push(obj)
            }
            this.column = column
            this.tableData = tableData
            this.loading = false
        })
    },
     //编辑
     async edit(){
        this.tableData2 = JSON.parse(JSON.stringify(this.tableData))
        this.isEdit = true
    },
    //保存
    save(){
        var data = {
            column:this.column,
            tableData:this.tableData
        }
        // console.log(JSON.stringify(data))
        localStorage.setItem('details_1',JSON.stringify(data))
        this.isEdit = false
    },
    //取消编辑
    cancel(){
        this.tableData = JSON.parse(JSON.stringify(this.tableData2))
        this.isEdit = false
    },
  },
};
</script>
<style lang="scss" scoped>
.head{
    width:100%;
    display: flex;
    flex-direction: row-reverse;
}
.text{
    text-align: left;
}
</style>
<style lang="scss">
    .Evidence_details .el-table .el-table__cell {  
        vertical-align: top;  
        /* 其他样式... */  
    }  
</style>