赞
踩
效果如图
代码
- <template>
- <div>
- <el-table
- v-loading="listLoading"
- :data="list"
- row-key="id"
- :has-n-o="false"
- :cell-class-name="tableCellClassName"
- @sort-change="sortChange"
- @row-dblclick="dbclick"
- >
-
- <el-table-column fixed prop="processid" label="编号" align="left" width="150">
- <template slot-scope="scope">
- <el-input
- v-if="scope.row.index + ',' + scope.column.index == currentCell"
- :ref="scope.row.index + ',' + scope.column.index"
- v-model="scope.row.processid"
- @blur="hideInput(scope.row)"
- />
- <span v-else>{{ scope.row.processid }}</span>
- </template>
- </el-table-column>
-
- <el-table-column prop="processtype_name" label="类别" align="left" width="100">
- <template slot-scope="scope">
- <el-select
- v-if="scope.row.index + ',' + scope.column.index == currentCell"
- v-model="scope.row.processtype"
- >
- <el-option
- v-for="(item, index) in processtypeOptions"
- :key="index"
- :label="item.fullName"
- :value="item.enCode"
- />
- </el-select>
- <span v-else>{{ scope.row.processtype_name }}</span>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </template>
- <script>
-
- export default {
- data() {
- return {
- list: [], // 数据
- // 用一个字符串来保存当前双击的是哪一个单元格
- currentCell: null,
- }
- },
-
- methods: {
- // 给单元格绑定横向和竖向的index,这样就能确定是哪一个单元格
- tableCellClassName({ row, column, rowIndex, columnIndex }) {
- row.index = rowIndex
- column.index = columnIndex
- },
- // 获得当前双击的单元格的横竖index,然后拼接成一个唯一字符串用于判断,并赋给currentCell
- // 拼接后类似这样:"1,0","1,1",
- dbclick(row, column) {
- this.currentCell = row.index + ',' + column.index
- // input 自动获取焦点
- if (column.property === 'processid_name' || column.property === 'processmoudel_name') {
- // 双击后自动获得焦点
- this.$nextTick(() => {
- this.$refs[row.index + ',' + column.index].focus()
- })
- }
- },
- // 关闭编辑状态
- hideInput(row) {
- this.currentCell = null
- }
- }
- }
- </script>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。