关于ele一些组件的使用

531 阅读1分钟

1:在table组件里面,点击编辑给我显示出编辑状态,按钮换成对应的确定和取消按钮

      <el-table-column prop="operation" label="操作" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.showBtn">
            <el-button type="text" size="small">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >删除</el-button>
          </span>
          <span v-else>
            <el-button type="text" size="small" @click="saveTableRow(scope)">保存</el-button>
            <el-button type="text" size="small" @click.native.prevent="cancelAddRow(scope)">取消</el-button>
          </span>
        </template>
      </el-table-column>

2:点击编辑之后,将表格里面的span标签改为input标签,呈现出可编辑状态

      <el-table-column prop="IDAssignment" label="ID赋值" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isSet">
            <el-input v-model="scope.row.IDAssignment"></el-input>
          </span>
          <span v-else>{{scope.row.IDAssignment}}</span>
        </template>
      </el-table-column>