el-table合并表头

fighting day

已于 2024-04-16 09:39:30 修改

阅读量294

点赞数 3

文章标签： vue.js javascript ecmascript

于 2024-04-12 15:37:33 首次发布

本文链接：https://blog.csdn.net/weixin_43842692/article/details/137683006

版权

html部分：

<el-table-column align="center" label="标准产出率(%)">
  <template slot-scope="scope">
    <span v-if="scope.row.isEditing">
      <el-input v-model="scope.row.stageList[index].stageLable" size="mini" placeholder="请输入"  />
    </span>
    <span v-else>{{ scope.row.stageList[index].stageLable}}</span>
  </template>
</el-table-column>
<el-table-column align="center" label="价格">
  <template slot-scope="scope">
    <span v-if="scope.row.isEditing">
      <el-input v-model="scope.row.stageList[index].standardOutputRate" size="mini" placeholder="请输入"  />
    </span>
    <span v-else>{{ scope.row.stageList[index].standardOutputRate }}</span>
  </template>
</el-table-column>

js部分：

export default {
data() {
return {
loading: false,
// 表格组件列表数据对象
tableData: [],
planList: [],
editRowJson: ‘’
};
},
created() {
this.initData();
},

methods: {

        getList() {
          const list = [
            {
              id: '123',
              name: '学校1',
              stageList: [
                { planLable: '计划目标',stageLable: '第一阶段', standardOutputRate:''},
                { planLable: '计划目标',stageLable: '第二阶段', standardOutputRate:''},
                { planLable: '计划目标',stageLable: '第三阶段', standardOutputRate:''},
                { planLable: '计划目标',stageLable: '第四阶段', standardOutputRate:''}
              ]
            },
            {
              id: '123',
              name: '学校1',
              stageList: [
                {  planLable: '基本目标',stageLable: '第一阶段', standardOutputRate:'' },
                {  planLable: '基本目标',stageLable: '第二阶段', standardOutputRate:'' },
                {  planLable: '基本目标',stageLable: '第三阶段', standardOutputRate:'' },
                {  planLable: '基本目标',stageLable: '第四阶段', standardOutputRate:'' }
              ]
            },
            {
              id: '123',
              name: '学校1',
              stageList: [
                {  planLable: '基本目标',stageLable: '第一阶段', standardOutputRate:'' },
                {  planLable: '基本目标',stageLable: '第二阶段', standardOutputRate:'' },
                {  planLable: '基本目标',stageLable: '第三阶段', standardOutputRate:'' },
                {  planLable: '基本目标',stageLable: '第四阶段', standardOutputRate:'' }
              ]
            }

          ];
          //   拿到列表数据
          this.tableData = list;
          this.stageList = (list[0] && list[0]['stageList']) || [];
        },
        /**
         * @method handleData
         * @description 编辑或者保存数据
         */
        handleData(row, index) {
          // 如果其他行正在编辑，必须先保存
          for (const schoolItem of this.tableData) {
            if (schoolItem.isEditing && schoolItem.id !== row.id) {
              this.$message({
                type: 'info',
                message: '请先保存正在编辑的行'
              });
              return;
            }
          }
          if (row.isEditing) {
            // 保存
            for (const planItem of row.planList) {
              // 有数据为空则不保存
              for (const stageItem of planItem.stageList) {
                if (stageItem.value === '') {
                  this.$message({
                    type: 'info',
                    message: '数据不能为空'
                  });
                  return;
                }
              }
            }
            this.$set(row, 'isEditing', false)
          } else {
            // 编辑
            this.editRowJson = JSON.stringify(row);
            this.$set(row, 'isEditing', true)
          }
        },
        /**
         * @method cancelEdit
         * @description 退出编辑
         */
        cancelEdit(row, index) {
          var editRow = JSON.parse(this.editRowJson);
          row.planList = editRow.planList;
          row.isEditing = !row.isEditing;
        },
        /**
         * @method deleteData
         * @description 点击删除
         */
        deleteData(row, index) {
          this.$confirm('是否删除本条?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.tableData.splice(index, 1);
          })
          .catch(err => {
            console.log(err)
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
		}

};

效果图：
请添加图片描述