el-table点击一行数据，checkBox自动勾选Demo，table实现行内编辑

效果：

代码：

<el-table ref="table"
                  border
                  :height="tableHeight"
                  v-loading="loading"
                  :data="tableDate"
                  @selection-change="selectItem"
                  @row-click="openDetails"
                  style="width: 100%;">
            <el-table-column type="selection" width="55" :reserve-selection="false"></el-table-column>
            <el-table-column prop="name" :show-overflow-tooltip="true" align="center"  label="通道名称"/>
            <el-table-column prop="runDevName" :show-overflow-tooltip="true" align="center"  label="通道编号"/>
            <el-table-column prop="city" :show-overflow-tooltip="true" align="center"  label="所属地市"/>
            <el-table-column prop="maintOrg" :show-overflow-tooltip="true" align="center"  label="运维单位"/>
            <el-table-column prop="maintGroup" :show-overflow-tooltip="true" align="center"  label="维护班组"/>
            <el-table-column prop="startPosition" :show-overflow-tooltip="true" align="center"  label="起点位置">
                <template scope="scope">
                    <el-select v-model="scope.row.startPosition" v-show="scope.row.show"  placeholder="请选择">
                        <el-option
                                v-for="item in dydjbm"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                        </el-option>
                    </el-select>
                    <span v-show="!scope.row.show">{{scope.row.startPosition}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endPosition" :show-overflow-tooltip="true" align="center"  label="终点位置">
                <template scope="scope">
                    <el-select v-model="scope.row.endPosition" v-show="scope.row.show"  placeholder="请选择">
                        <el-option
                                v-for="item in dydjbm"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                        </el-option>
                    </el-select>
                    <span v-show="!scope.row.show">{{scope.row.endPosition}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="startName" :show-overflow-tooltip="true" align="center"  label="起点名称">
                <template scope="scope">
                    <el-input size="small" v-model="scope.row.startName" v-show="scope.row.show" placeholder="请输入内容"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.startName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endName" :show-overflow-tooltip="true" align="center"  label="终点名称">
                <template scope="scope">
                    <el-input size="small" v-model="scope.row.endName" v-show="scope.row.show" placeholder="请输入内容"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.endName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="operateDate" :show-overflow-tooltip="true" align="center"  label="投运日期"/>

            <el-table-column label="操作" width="200" :show-overflow-tooltip="true" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="toMap(scope.row)">定位</el-button>
                    <el-button type="success"  size="mini" @click="editLine(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

 js代码：

export default {
        name: "index",
      
        data() {
            return {
                dialogVisible: false,
                title:'八台里通道详情',
                flags: 'new',
                selectlist: [], // 选择的table数据
                isCheckDate: true,
                tableDate:[],
                loading: false,
                tableHeight: "calc(100vh - 300px)",
                dydjbm: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }],
            }
        },
        created() {
            let list=[{
                name: '222',
                runDevName: '2834832492',
                city: '张家口22222222222222222222222222222222',
                maintOrg: '运维单位',
                maintGroup: 'jsidfs班组',
                startPosition: '选项1',
                endPosition: '选项1',
                startName: '展示干的张',
                endName: '展示干sss的张',
                operateDate: '投运日期'
            },{
                name: '3332',
                runDevName: '2834832492',
                city: '张家口',
                maintOrg: '运维单位',
                maintGroup: 'jsidfs班组',
                startPosition: '选项1',
                endPosition: '选项1',
                startName: '展示干的张',
                endName: '展示干sss的张',
                operateDate: '投运日期'
            }];
            
            // 遍历table每一个项，并且追加show属性

            list.forEach(element => {
                element["show"] = false
            });
            this.tableDate = list;
        },
        methods:{
            toMap(row){
                this.$emit('gotoMap',row)
            },
            // 保存
            save(){
                this.selectlist[0].show = false;
                this.$message({
                    type: 'success',
                    message: '数据保存成功!'
                });
            },
            // 删除
            deleteData(){
                this.$confirm('确定要删除该条数据吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //添加
            add(){
                this.flags = 'new';
                this.title='通道新增';
                this.dialogVisible = true;
            },
            //修改
            edit(){
                if (this.selectlist.length !==0) {
                    this.flags = 'new';
                    this.title='通道修改';
                    this.dialogVisible = true;
                }
            },
            //编辑
            editLine(row){
                row.show = true;
            },
            // 详情
            getDetail(){
                if (this.selectlist.length !==0) {
                    this.$store.dispatch('tdgj/setBmArr', this.selectlist[0]);
                    this.flags = 'info';
                    this.title='通道详情';
                    this.dialogVisible = true;
                }
            },
           
            // 当某一行被点击时会触发该事件	row, column, event
            openDetails(row){
                this.selectlist= [];
                this.selectlist.push(row);
                this.$refs.table.clearSelection();
                this.$refs.table.toggleRowSelection(row);
            },
            //当选择项发生变化时会触发该事件
            selectItem(rows) {
                if (rows.length > 1 || rows.length == 0) {
                    this.isCheckDate = true;
                    var newRows = rows.filter((it, index) => {
                        this.$refs.table.toggleRowSelection(it).show = false;
                    });
                    this.selectlist = newRows;
                } else {
                    this.isCheckDate = false;
                    this.selectlist = rows;
                }
            }
        }
    }