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"  @click="synchronization" 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" @cell-dblclick="cellDblclick">
                <el-table-column  v-for="item in column.filter(item=>!item.ifHidden)"
                :render-header="$commonJS.renderHeaderMethods" :key="item.field" :prop="item.field" :label="item.label" :width="item.width || 'auto'"
                align="center">
                    <template slot-scope="scope">
                        <div>
                            <!-- @input="(value)=>getData(scope.row,item.field,value)" -->
                            <my-RichText :autoFocus="true" :value="getColumnData(scope.row,item.field)"  v-if="editField==(item.field+scope.row.id)" @blur="(value)=>changeMessage(item.field,scope.row,value)"></my-RichText>
                            <div class="text" v-else v-html="getColumnData(scope.row,item.field)" ></div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
          </el-main>
      </el-container>
  
      
    </div>
</template>
<script>
import common from './common';
const column = [
    {
        field:'invalidStatue.statuteId',
        label:'法条',
        editable:false,
        width:100
    },
    {
        field:'invalidStatue.claimText',
        label:'权利要求',
        editable:true
    },
    {
        field:'invalidReason',
        label:'证据公开',
        editable:true
    },
    {
        field:'presentOpinions',
        label:'权利人答复',
        editable:true
    },
    {
        field:'rbDecision',
        label:'合议组认定',
        editable:true
    },
    {
        field:'invalidStatue.courtOpinions1',
        label:'一审',
        editable:false,
        width:100
    },
    {
        field:'invalidStatue.courtOpinions2',
        label:'二审',
        editable:false,
        width:100
    }
]
export default {
  components: {},
  mixins:[common],  
  props: {},
  data() {
    return {
        // tableData:[],
        column:column,
        // loading:false,
        // editField:'',
        // editMessage:'',
        statueType:1
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    // this.init()
  },
//   methods: {
//     async init(){
//         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"); 
//             var trList =  doc.body.getElementsByTagName('tr')
//             var head = trList[0]
//             var headList = head.getElementsByTagName('td')
//             var sign = true
//             var num = 0
//             var tableData = []
//             for(var i = 1;i<trList.length;i++){
//                 var bodyList = trList[i].getElementsByTagName('td')
//                 var obj = {
//                     id:i
//                 }
//                 for(var j = 0;j<bodyList.length;j++){
//                     obj[headList[j].innerText] = bodyList[j].innerHTML
//                     if(sign){
//                        if(headList[j].innerText == '一审'){
//                             num = 1
//                         }
//                         if(headList[j].innerText == '二审'){
//                             num = 2
//                         } 
//                     }
                    
//                 }
//                 if(sign){
//                     if(num == 0){
//                         var arr = this.column.filter(item=>{
//                             return item.field == '一审' || item.field == '二审'
//                         })
//                         arr.forEach(item=>{
//                             item.ifHidden = true
//                         })
//                     }
//                     else if(num == 1){
//                         this.column.find(item=>{
//                             return item.field == '二审'
//                         }).ifHidden = true
//                     }  
//                 }
                
//                 sign = false
//                 tableData.push(obj)
//             }
//             this.tableData = tableData
//             this.loading = false
//         })
//     },
//      //编辑
//      async edit(item,row){
//         if(item.field && row){
//             if(!item.editable){
//                 this.$message.warning('该栏位不可编辑')
//                 return
//             }
//             this.editField = item.field + row.id
//             this.editMessage = row[item.field]
//             return
//         }
//     },
//     changeMessage(field,row,value){
//         this.editField = null
//         if(value == this.editMessage){
//             this.$message('没有发生修改')
//             return
//         }
//         this.$message('修改了')
//     },

//   },
};
</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>