el-table-column 某一列根据excel数据显示

需求：

页面表格的排序项 根据 excel中的排序显示，没有这一项则跳过（根据模板ID）

 

 

 

 

 

 

 

import XLSX,{ read, utils } from "xlsx";

点击按钮执行导入函数：

<div class="p_select" v-if="!templateStatus">
                <a href="#" class="add_btn" @click="importTable" style="width: 100px;">导入部位排序</a>
                <input v-show="false" id="import_table" type="file" @change="onChange" class="file-ipt" />
            </div>

// 导入排序
      importTable(){
        // this.onChange()
        document.getElementById('import_table').click();
      },
      onChange(e) {
        const file = e.target.files[0];
        const fileReader = new FileReader();

        fileReader.onload = ev => {
          try {
            const data = ev.target.result;
            const workbook = read(data, { type: "binary" });
            const params = [];
            // 取对应表生成json表格内容
            workbook.SheetNames.forEach(item => {
              params.push({
                name: item,
                dataList: utils.sheet_to_json(workbook.Sheets[item])
              });
              this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
              this.readData()
            });
            // 该算法仅针对表头无合并的情况
            if (this.tableData.length > 0) {
              // 获取excel中第一个表格数据tableData[0][0]，并且将表头提取出来
              for (const key in this.tableData[0][0]) {
                this.tableHead.push(key);
              }
            }
            return params;
            // 重写数据
          } catch (e) {
            console.log("error:" + e);
            return false;
          }
        };
        fileReader.readAsBinaryString(file);
      },
      readData(){
        let tableData = this.tableData[0]
        let indexList = []
        for(let i = 0 ; i < tableData.length; i++){
          indexList.push({
            templateId:tableData[i]['模板ID'],
            positionOrderIndex: tableData[i]['部位排序'],
          })
        }
        let templateListData = this.templateListData
        for(let i = 0 ; i < templateListData.length; i++){
          let positionOrderIndex
          indexList.forEach(item => {
            if(templateListData[i].templateId*1 === item.templateId*1){
              positionOrderIndex = item.positionOrderIndex
              templateListData[i].positionOrderIndex = positionOrderIndex
              templateListData[i].positionOrderIndexStr = i
            }
          })

        }
        this.templateListData = templateListData.sort(this.compareAsc("positionOrderIndex"))
        this.key = Math.random()
      },






      // 排序 升序
      compareAsc: function(property) {
        return function (a, b) {
          const value1 = a[property] || 99999999;
          const value2 = b[property] || 99999999;
          return value1 - value2;
        }
      },

 

 

data() {
      return {
        rowData:'',

        templateListData:[],

        multipleSelection:'',

        tableData:[],
        tableHead:[],
        fileList: [], //上传文件列表
        key:''

      };
    },

<div class="list_content">
            <div style="height: 30px;padding: 24px 0;">
                <span>方案名称：{{this.rowData.planName}} </span>
            </div>
            <el-table :key="key" id="templateListData" :data="templateListData" :height=winHeight  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" v-if="!templateStatus"></el-table-column>
                <el-table-column prop="templateId" align="left" label="模板ID" sortable></el-table-column>
                <el-table-column prop="templateName" align="left" label="模板名称"></el-table-column>
                <!--<el-table-column prop="positionId" align="center" label="部位ID"></el-table-column>-->
                <el-table-column prop="positionName" align="left" label="所属部位"></el-table-column>
                <el-table-column prop="templateDesc" align="left" label="模板描述" v-if="!templateStatus"></el-table-column>

                <el-table-column align="left" label="部位排序" width="120px" v-if="!templateStatus">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.positionOrderIndex" size="small" type="number"
                        onmousewheel="this.value=this.value.replace(/\D/g,'')"
                        onkeyup="this.value=this.value.replace(/\D|^/g,'')"
                        onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"
                        @input="onInput($event, scope.$index)"
                        @blur="onOrderIndexChanged($event, scope.$index)"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="positionOrderIndex" align="left" label="部位排序" v-if="templateStatus"></el-table-column>

                <el-table-column label="是否必填" align="left">
                    <template slot-scope="scope">
                        <el-switch
                                v-model='scope.row.isNeed'
                                active-color="#13ce66"
                                active-value='1'
                                inactive-value='0'
                                @change="changeIsNeed(scope.row.isNeed,scope.row, scope.$index)"
                                :disabled="templateStatus"
                        ></el-switch>
                    </template>
                </el-table-column>

            </el-table>

        </div>

 

 

 

 

 

其他功能：

当前输入框和其他输入框的值相同时，原来输入框的值清空

输入框的值不能大于列表长度

onOrderIndexChanged(event,index){
        let max = this.templateListData.length
        let orderIndex = event.target.value
        if(orderIndex <= 0 || orderIndex > max){
          net.message(this, "属性排序不能小于0，不能大于"+max, "warning");
          this.templateListData[index].positionOrderIndex = ""
          return;
        }
        for (let i = 0; i < this.templateListData.length; i++){
          if(this.templateListData[i].positionOrderIndex*1  === orderIndex*1){
            this.templateListData[i].positionOrderIndex = ''
            this.templateListData[index].positionOrderIndex = orderIndex
          }
        }
        this.$forceUpdate()
        this.reloadView()
      },

onInput(e,index) {
        this.$forceUpdate()
        this.reloadView()
      },
reloadView(){
        let templateListDataLenth = this.templateListData.length
        this.templateListData.push({reloadView:true})
        this.templateListData.splice(templateListDataLenth,1)
      },