el-table表格中加入输入框

 

 

<template>
  <div class="box">
    <div class="btn">
      <el-button type="primary">发送评委</el-button>
      <el-button type="primary" @click="flag = true" v-if="!flag">编辑</el-button>
      <el-button type="primary" @click="saveBtn" v-else>保存</el-button>
    </div>
    <el-table :data="tableData" border :header-cell-style="{background: '#e7ebf6',color:'green'}" :cell-style="rowStyle">
      <el-table-column prop="pf" label="评分项" min-width="100" align="center">
        <template slot-scope="{row}">
          <span v-if="!flag">{{row.pf}}</span>
          <el-input type="textarea" :autosize="true" v-else v-model="row.pf" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="mx" label="评分项明细" min-width="200" align="center">
        <template slot-scope="{row}">
          <span v-if="!flag">{{row.mx}}</span>
          <el-input type="textarea" :autosize="true" v-else v-model="row.mx" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="bz" label="评分标准" min-width="300" align="center">
        <template slot-scope="{row}">
          <span v-if="!flag">{{row.bz}}</span>
          <el-input type="textarea" :autosize="true" v-else v-model="row.bz" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="qz" label="分项权重" min-width="200" align="center">
        <template slot-scope="{row}">
          <span v-if="!flag">{{row.qz}}</span>
          <el-input type="textarea" :autosize="true" v-else v-model="row.qz" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          pf: '基本信息',
          mx: '公司基本情况',
          bz: '参与人(企业)的注册资金及规模',
          qz: '1'
        },
        {
          pf: '基本信息',
          mx: '资格证明文件完整性',
          bz: '具备征集说明文件要求中的资格证明文件，齐全有效',
          qz: '2'
        },
        {
          pf: '技术方案',
          mx: '系统架构及解决方案整体情况',
          bz: '系统整体架构设计合理，满足建设独立、专业的电子会计档案系统要求，系统部署灵活，满足稳定性、安全性和可扩展性要求。方案完整清晰，针对性强，可行性高，技术领先，用户操作体验良好。',
          qz: '3'
        },
        {
          pf: '技术方案',
          mx: '产品功能及接口',
          bz: '1、支持建设独立、专业的电子会计档案系统，具备建设独立运作的电子会计档案系统的案例实施经验。（3分） 2、产品功能可扩展、可开发、可配置，可以提供标准化接口供外部系统调用。（3分） 3、产品提供转换版式文件的功能，能够协助不具备版式文件生成条件的企业内部系统，完成符合会计档案归档要求的档案生成功能。（3分） 4、支持档案文件快速检索及查询定位，对需要查询的档案，可以在档案系统独立查看全部资料，无需使用编号，再到其他系统中查询。（3分） 5、支持与会计总账系统、OA系统开发联查接口，能够实现从OA端、会计总账系统端查询调阅档案的功能。（3分）',
          qz: '30'
        },
        {
          pf: '技术方案',
          mx: '系统架构及解决方案整体情况',
          bz: '系统整体架构设计合理，满足建设独立、专业的电子会计档案系统要求，系统部署灵活，满足稳定性、安全性和可扩展性要求。方案完整清晰，针对性强，可行性高，技术领先，用户操作体验良好。',
          qz: '3'
        },
      ],
      flag: false
    }
  },
  methods: {
    // 保存
    saveBtn () {
      console.log(this.tableData)
      // 掉接口提交
      // 回到初始状态
      this.flag = false
    },
    // 更改列表样式
    rowStyle () {
      return "text-align:left"
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  margin: 0 30px;
}
.btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>