SOURCE

var Main = {


    data() {
        
        return {

            courseList: [
                {
                    id: '666',
                    studentId: '2020111601',
                  
                    tableOption: [
                        { tr:true,score: '86',type:'A' },
                        {  tr:false,score: '91',type:'B' },
                        {  tr:true,score: '92',type:'C' },
                    ],
                    schoolYear: '备注1'
                },
                {
                    id: '888',
                    studentId: '2020111602',
                 
                    tableOption: [
                        {  tr:false,score: '91',type:'A' },
                        {  tr:false,score: '92',type:'B'  },
                        {  tr:true,score: '86',type:'C'  },

                    ],
                    schoolYear: '备注2'
                }
            ],
            tableOptionlist: [
                { label: '列1' },
                { label: '列2' },
                { label: '列3' },

            ],

        }
    },

    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },
 clickEdit() {
            console.log(this.courseList);
        },

  //定义导出Excel表格事件
        exportExcel() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "sheetjs.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        }

    }


}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue@2/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.15.8/lib/index.js">
</script>
<div id="app">
	<template>
		<div>
			<el-table :data="this.courseList" border>
				<el-table-column label="id" align="center" prop="id"> </el-table-column>
				<el-table-column label="编码" prop="studentId"> </el-table-column>
			
            	
            <el-table-column  
              v-for="(item, index) in tableOptionlist"
              :key="index"
              :label="item.label" 
              align="center">

              <template slot-scope="scope">
                   <el-checkbox  v-model="scope.row.tableOption[index].tr"> </el-checkbox>
                <el-input v-show="scope.row.tableOption[index].tr == true"  v-model="scope.row.tableOption[index].score"> </el-input>
              </template>
            </el-table-column>

				<el-table-column label="备注" align="center" prop="schoolYear" width="200"> </el-table-column>

				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.$index, scope.row)" size="small" type="text" style="color: darkorange;font-size: 18px;">
							<i class="el-icon-edit-outline"></i>
                </el-button>
                <el-button  @click="exportExcel" type="text" size="small" style="color: red;font-size: 18px;">
                  <i class="el-icon-delete"></i>
                </el-button>
              </template>
            </el-table-column>



          </el-table>

 	<el-button @click="clickEdit" size="small" type="text" style="color: darkorange;font-size: 18px;">
							<i class="el-icon-edit-outline"></i>
                </el-button>
  


    </div>
 
</template>
</div>

@import url("//unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css");