多级表头

14 阅读2分钟

image.png


onFormMounted(){

}
afterDataLoading(){
  let url = 'http://tdrj.esynergy.cn:1025/workflow/cdn/js/vue.js'
  let url2 = 'https://unpkg.com/element-ui/lib/index.js'
  const that = this
  this.common.createScript(url, null).then(result => {
    this.common.createScript(url2, null).then(result2 => {
      setTimeout(() => {
        const oldTable = document.querySelector(".el-table");
        oldTable.style.display = 'none'
        const parent = document.querySelector(".table_box");
        const app1Div = document.createElement('div');
        app1Div.id = 'a992';
        parent.insertBefore(app1Div, parent.firstChild)
        const TableComponent = Vue.extend({
          template: ` <el-table class="zdy_tb" border :data="tableData" style="width: 100%">
              <el-table-column prop="unit" label="单位" width="150" align="center"/>
              <el-table-column prop="job" label="职务" width="100" align="center"/>
              <el-table-column prop="name" label="姓名" width="80" align="center"/>
              <el-table-column label="党支部考核" align="center">
                <el-table-column prop="party_weighted_score" label="党支部考核得分" width="120" align="center"/>
                <el-table-column prop="party_score" label="得分1" width="60" align="center"/>
              </el-table-column>
              <el-table-column label="行政目标管理" align="center">
                <el-table-column prop="admin_weighted_score" label="行政目标考核得分" width="130" align="center"/>
                <el-table-column prop="admin_score" label="得分2" width="60" align="center"/>
              </el-table-column>
              <el-table-column label="单位民主测评" align="center">
                <el-table-column prop="democratic_level1" label="优秀" width="50" align="center"/>
                <el-table-column prop="democratic_level2" label="称职" width="50" align="center"/>
                <el-table-column prop="democratic_level3" label="基本称职" width="80" align="center"/>
                <el-table-column prop="democratic_level4" label="不称职" width="60" align="center"/>
                <el-table-column prop="democratic_total_votes" label="票数" width="50" align="center"/>
                <el-table-column prop="democratic_score" label="得分3" width="60" align="center"/>
              </el-table-column>
              <el-table-column label="分类互评" align="center">
                <el-table-column prop="mutual_level1" label="优秀" width="50" align="center"/>
                <el-table-column prop="mutual_level2" label="称职" width="50" align="center"/>
                <el-table-column prop="mutual_level3" label="基本称职" width="80" align="center"/>
                <el-table-column prop="mutual_level4" label="不称职" width="60" align="center"/>
                <el-table-column prop="mutual_total_votes" label="票数" width="50" align="center"/>
                <el-table-column prop="mutual_score" label="得分4" width="60" align="center"/>
              </el-table-column>
              <el-table-column label="单位正职评价" align="center">
                <el-table-column prop="supervisor_level1" label="优秀" width="50" align="center"/>
                <el-table-column prop="supervisor_level2" label="称职" width="50" align="center"/>
                <el-table-column prop="supervisor_level3" label="基本称职" width="80" align="center"/>
                <el-table-column prop="supervisor_level4" label="不称职" width="60" align="center"/>
                <el-table-column prop="supervisor_total_votes" label="票数" width="50" align="center"/>
                <el-table-column prop="supervisor_score" label="得分5" width="60" align="center"/>
              </el-table-column>
              <el-table-column prop="total_weighted_score" label="总得分" width="50" align="center"/>
            </el-table>`,
          data () {
            return {
              tableData: that.dataJson.tableData
            };
          }
        })
        const el = this.$el.querySelector('#a992');
        this.$refs.app2 = el;
        new TableComponent().$mount(that.$refs.app2);
      }, 50);
    })
  })
}