标签：vue name columnIndex column value element 输入框 rowIndex row

完整html内容

      <!-- 表格 -->
      <el-table class="table"
                stripe
                border
                :data="dataList"
                @cell-click="tabClick"
                :row-class-name="tableRowClassName"
                :cell-class-name="tableCellClassName"
                style="width: 100%">
        <el-table-column v-for="(val, i) in theadList"
                         :fixed="i == 0"
                         :key="i"
                         :label="val.name"
                         :min-width="val.w"
                         align="center">
          <template slot-scope="scope">

            <span v-if="scope.row.index === rowIndex && scope.column.index === columnIndex">
              <el-input v-model="scope.row[val.value]"
                        @blur="inputBlur(scope)" />
            </span>
            <span v-else>{{ scope.row[val.value] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
                         align="center"
                         label="操作"
                         width="180">
          <template slot-scope="scope">
            <el-button @click="materialDetailClick(scope.row.id,scope.row.businessesId)"
                       type="text">查看物资详情</el-button>
            <!-- 弹窗提示 -->
            <el-button @click="finishOrderClick(scope.row,'finishorder')"
                       type="text">完成订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :current-page="currentPage"
                     :page-sizes="[10, 30, 50]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />

data中定义内容

	  rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      currentPage: 1,
      pageSize: 10,
      total: 0,
      theadList: [
        { name: '合同编号', value: 'contractNum', w: '10%' },
        { name: '订单号', value: 'orderNum', w: '15%' },
        { name: '业主单位', value: 'owner', w: '10%' },
        { name: '采购部门', value: 'purchasing', w: '10%' },
        { name: '订单状态', value: 'status', w: '10%' },
        { name: '要求供货日期', value: 'supplyDate', w: '15%' },
        { name: '订单完成日期', value: 'finishDate', w: '15%' },
        { name: '交货地址', value: 'deliveryAddress', w: '15%' },
      ],
      dataList: [
        {
          id: 4500000469,
          businessesId: 4500000469,
          contractNum: '20160502',
          orderNum: '20160502',
          owner: '金沙',
          purchasing: '事业部',
          status: '1',
          supplyDate: '2016-05-02',
          finishDate: '2016-05-03',
          deliveryAddress: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 4500000503,
          businessesId: 4500000503,
          contractNum: '20160503',
          orderNum: '20160503',
          owner: '金沙',
          purchasing: '事业部',
          status: '4',
          supplyDate: '2016-06-02',
          finishDate: '2016-06-03',
          deliveryAddress: '上海市普陀区金沙江路 1518 弄',
        },
      ],

js内容根据需求可自行调整

methods: {
        //把每一行的索引加到行数据中
        tableRowClassName({ row, rowIndex }) {
      	  row.index = rowIndex
         },
         //把每一列的索引加到列数据中
        tableCellClassName({ column, columnIndex }) {
       	  column.index = columnIndex
     	 },
     	 //单元格被点击时会触发该事件
     	tabClick(row, column, cell, event) {
    	  console.log(row, '单条数据', column, '列信息', cell, 'td实例', event)
    	  this.rowIndex = row.index
    	  this.columnIndex = column.index
  		  },
  		  //输入框失去焦点事件（初始化中间变量）
  		inputBlur(scope) {
    	  this.rowIndex = -1
  		  this.columnIndex = -1
    },
        }

标签：vue,name,columnIndex,column,value,element,输入框,rowIndex,row
来源： https://blog.csdn.net/weixin_49866029/article/details/112792794

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。