动态生成两列表格

最新推荐文章于 2024-01-10 21:32:33 发布

dy1717

最新推荐文章于 2024-01-10 21:32:33 发布

阅读量358

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/dy1717/article/details/130227520

版权

初始样式：

实现效果：

HTML代码如下：

<div class="table_style">
      <el-row :gutter="24" style="margin:0">
        <el-col :span="12" style="padding:0">
          <el-table
            class="main-table"
            :data="tableData"
            border
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#F1F3F5', 'text-align': 'left' }"
            style="width: 100%"
          >
            <el-table-column
              id="batteryChipNo"
              prop="batteryChipNo"
              label="序列号"
            />
            <el-table-column
              prop="probeTempNo"
              label="学号"
              width="194"
            >
              <template slot-scope="scope">
                <el-input id="probeTempNo" v-model="scope.row.probeTempNo"  />
              </template>
            </el-table-column>
            <el-table-column
              prop="modelNo"
              label="年龄"
              width="194"
            >
              <template slot-scope="scope">
                <el-input id="modelNo" v-model="scope.row.modelNo"  />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table
            :data="tableData1"
            class="main-table"
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#F1F3F5', 'text-align': 'left' }"
            border
            style="width: 100%;;margin-left:1%"
          >
            <el-table-column
              id="batteryChipNo"
              prop="batteryChipNo"
              label="序列号"
            />
            <el-table-column
              prop="probeTempNo"
              label="学号"
              width="194"
            >
              <template slot-scope="scope">
                <el-input id="probeTempNo" v-model="scope.row.probeTempNo"  />
              </template>
            </el-table-column>
            <el-table-column
              prop="modelNo"
              label="年龄"
              width="194"
            >
              <template slot-scope="scope">
                <el-input id="modelNo" v-model="scope.row.modelNo" />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

JS代码如下：

<script>
export default {
  data() {
    return {
      secondForm:{
        batteryChipCount:""
      },
      tableData:[],
      tableData1:[]
    };
  },
  mounted() {
   
  },
  
  methods: {
    reset(){
         if (document.getElementById('batteryChipCount').value) {
        const num = document.getElementById('batteryChipCount').value
        let splitNum = 0
        if (num % 2 == 0) {
          splitNum = num / 2
        } else {
          splitNum = parseInt(num / 2) + 1
        }
        const tableData = []
        for (let i = 0; i < splitNum; i++) {
          tableData.push({
            batteryChipNo: i + 1,
            probeTempNo: '', // 探针
            modelNo: '' // 模组数
          })
        }
        this.tableData = tableData
        const tableData1 = []
        for (let i = splitNum; i < num; i++) {
          tableData1.push({
            batteryChipNo: i + 1,
            probeTempNo: '', // 探针
            modelNo: '' // 模组数
          })
        }
        this.tableData1 = tableData1
      }
    },
    // 接口里面
    // searchTable(){
    //   try{
    //     const {data} = await searchTable ({})
    //     if(data.messageCode === '000000'){
    //        // 拿到的这个list的值 取余之后赋值给两个table
    //       const num = data.data.list.length
    //       let splitNum = 0
    //       if (num % 2 == 0) {
    //         splitNum = num / 2
    //       } else {
    //         splitNum = parseInt(num / 2) + 1
    //       }
    //       const tableData = []
    //       for (let i = 0; i < splitNum; i++) {
    //         tableData.push(data.data.list[i])
    //       }
    //       this.tableData = tableData
    //       const tableData1 = []
    //       for (let i = splitNum; i < num; i++) {
    //         tableData1.push(data.data.list[i])
    //       }
    //       this.tableData1 = tableData1
    //     }
    //   }catch(error){
    //     console.log(error)
    //   }
    // }
  },
};
</script>

就可以实现啦，希望能帮到大家