嗯，需要做成这个样子，所以网上查了些资料。整理了下。提供几个一个思路。不足之处请小伙伴指出来。

  •  普通版的table可编辑内嵌select选择框，输出框，编辑删除添加等

    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <!-- import CSS -->
    7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    8.     <!-- import Vue before Element -->
    9.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
    10.     <!-- import JavaScript -->
    11.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    12. </head>
    13.  
    14. <body style="display: flex;justify-content: center;width: 100%;">
    15.     <div id="app">
    16.         <el-card>
    17.             <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    18.                 <el-table-column prop="date" label="日期" width="180">
    19.                     <template slot-scope="scope">
    20.                         <el-select popper-class="role-option" v-model="scope.row.date" placeholder="请选择" size="small">
    21.                             <el-option v-for="item in optionData" :key="item.value" :label="item.name"
    22.                                 :value="item.value"></el-option>
    23.                         </el-select>
    24.                     </template>
    25.                 </el-table-column>
    26.                 <el-table-column prop="name" label="姓名" width="180">
    27.                     <template slot-scope="scope">
    28.                         <el-select popper-class="role-option" v-model="scope.row.name" placeholder="请选择" size="small">
    29.                             <el-option v-for="item in optionName" :key="item.value" :label="item.name"
    30.                                 :value="item.value"></el-option>
    31.                         </el-select>
    32.                     </template>
    33.                 </el-table-column>
    34.                 <el-table-column prop="addr" width="180" label="地址">
    35.                     <template slot-scope="scope">
    36.                         <el-select popper-class="role-option" v-model="scope.row.addr" placeholder="请选择" size="small">
    37.                             <el-option v-for="item in optionAddr" :key="item.value" :label="item.name"
    38.                                 :value="item.value"></el-option>
    39.                         </el-select>
    40.                     </template>
    41.                 </el-table-column>
    42.                 <el-table-column label="操作" width="100" header-align="right">
    43.                     <template slot-scope="scope">
    44.                         <div style="display: flex;justify-content: space-between;">
    45.                             <el-link icon="el-icon-plus" size="mini" type="primary"
    46.                                 @click="handleAdd(scope.$index, scope.row)" :underline="false"
    47.                                 style="font-size: 14px;margin-left: 40px"></el-link>
    48.                             <el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"
    49.                                 type="danger" :underline="false"></el-link>
    50.                         </div>
    51.                     </template>
    52.                 </el-table-column>
    53.             </el-table>
    54.         </el-card>
    55.     </div>
    56. </body>
    57. <script>
    58.     new Vue({
    59.         el: '#app',
    60.         data() {
    61.             return {
    62.                 optionData: [{ value: "1", name: "2016-05-03" }, { value: "2", name: "2016-05-04" }, { value: "3", name: "2016-05-05" }],
    63.                 optionName: [{ value: "1", name: " 王小虎" }, { value: "2", name: "王小龙" }, { value: "3", name: "王小狗" }],
    64.                 optionAddr: [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }],
    65.                 tableData: [{
    66.                     date: '2016-05-02',
    67.                     name: '王小虎',
    68.                     addr: '北凉',
    69.                 }, {
    70.                     date: '2016-05-04',
    71.                     name: '王小狗',
    72.                     addr: '西北道'
    73.                 },]
    74.             }
    75.         },
    76.         mounted() {
    77.  
    78.         },
    79.         methods: {
    80.             handleAdd(index, row) {
    81.                 this.tableData.push({
    82.                     date: '',
    83.                     name: '',
    84.                     addr: ''
    85.                 });
    86.             },
    87.             handleDelete(index, row) {
    88.                 if (index > 0) {
    89.                     this.tableData.splice(index, 1);
    90.                 }
    91.             },
    92.             tableRowClassName({ row, rowIndex }) {
    93.                 if ((rowIndex+1)%2 === 1) {
    94.                     return 'warning-row';
    95.                 } else{
    96.                     return 'success-row';
    97.                 }
    98.                 return '';
    99.             }
    100.         },
    101.         props: {},
    102.         computed: {},
    103.  
    104.         created() {
    105.  
    106.         },
    107.         watch: {},
    108.     })
    109. </script>
    110. <style>
    111.     .el-table .warning-row {
    112.         background: oldlace;
    113.     }
    114.  
    115.     .el-table .success-row {
    116.         background: #f0f9eb;
    117.     }
    118. </style>
    119.  
    120. </html>
  • 表格隐藏展示，数据联动，所谓数据联动，意思是通过第一列的选择控制之后两列的数据源展示不同的数据项。这里需要注意的如果选择框的数据源是动态通过接口获取的，那么需要把数据源由变量设置为函数，同时，接口的请求必须是同步的，不可以是异步，axios默认是异步的，如果没有合适的解决方案，可以使用jquery 的ajax方法。
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <!-- import CSS -->
    7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    8.     <!-- import Vue before Element -->
    9.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
    10.     <!-- import JavaScript -->
    11.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    12. </head>
    13.  
    14. <body style="display: flex;justify-content: center;width: 100%;">
    15.     <div id="app">
    16.         <el-card>
    17.             <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    18.                 <el-table-column prop="date" label="日期" width="180">
    19.                     <template slot-scope="scope">
    20.                         <el-select popper-class="role-option" v-model="scope.row.date" placeholder="请选择" size="small"
    21.                             @change="dateHandleChange">
    22.                             <el-option v-for="item in optionData" :key="item.value" :label="item.name"
    23.                                 :value="item.value"></el-option>
    24.                         </el-select>
    25.                     </template>
    26.                 </el-table-column>
    27.                 <el-table-column prop="name" label="姓名" width="180">
    28.                     <template slot-scope="scope">
    29.                         <el-select popper-class="role-option" v-model="scope.row.name" placeholder="请选择" size="small"  v-show="scope.row.date != '2'" >
    30.                             <el-option v-for="item in optionName" :key="item.value" :label="item.name"
    31.                                 :value="item.value"></el-option>
    32.                         </el-select>
    33.                     </template>
    34.                 </el-table-column>
    35.                 <el-table-column prop="addr" width="180" label="地址">
    36.                     <template slot-scope="scope">
    37.                         <el-select popper-class="role-option" v-model="scope.row.addr" placeholder="请选择" size="small">
    38.                             <el-option v-for="item in optionsAddr(scope.row)" :key="item.value" :label="item.name"
    39.                                 :value="item.value"></el-option>
    40.                         </el-select>
    41.                     </template>
    42.                 </el-table-column>
    43.                 <el-table-column label="操作" width="100" header-align="right">
    44.                     <template slot-scope="scope">
    45.                         <div style="display: flex;justify-content: space-between;">
    46.                             <el-link icon="el-icon-plus" size="mini" type="primary"
    47.                                 @click="handleAdd(scope.$index, scope.row)" :underline="false"
    48.                                 style="font-size: 14px;margin-left: 40px"></el-link>
    49.                             <el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"
    50.                                 type="danger" :underline="false"></el-link>
    51.                         </div>
    52.                     </template>
    53.                 </el-table-column>
    54.             </el-table>
    55.         </el-card>
    56.     </div>
    57. </body>
    58. <script>
    59.  /**
    60.     * @description: 表格隐藏展示，数据联动
    61.     * @author: Liruilong
    62.     */
    63.     new Vue({
    64.         el: '#app',
    65.         data() {
    66.             return {
    67.                 optionData: [{ value: "1", name: "2016-05-03" }, { value: "2", name: "2016-05-04" }, { value: "3", name: "2016-05-05" }],
    68.                 optionName: [{ value: "1", name: " 王小虎" }, { value: "2", name: "王小龙" }, { value: "3", name: "王小狗" }],
    69.                 tableData: [{
    70.                     date: '1',
    71.                     name: '1',
    72.                     addr: '1',
    73.                 }],
    74.                 optionAddrMapper: new Map(),
    75.             }
    76.         },
    77.         mounted() {
    78.             // 模拟ajax初始化数据集
    79.             this.optionAddrMapper.set("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
    80.         },
    81.         methods: {
    82.             optionsAddr(row) {
    83.                 console.log(row.date)
    84.                 console.log(this.optionAddrMapper.get(row.date));
    85.                 return this.optionAddrMapper.get(row.date);
    86.             },
    87.             //联动处理//模拟ajax调用接口获取数据.日期选择会联动地址
    88.             dateHandleChange(val) {
    89.                 // 模拟根据日期得到地址的数据集 这里写ajax ，必须是同步的请求。
    90.                 this.optionAddrMapper.set("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
    91.                 this.optionAddrMapper.set("2", [{ value: "9", name: "西域" }, { value: "8", name: "苗疆" }, { value: "7", name: "剑气长城" }]);
    92.                 this.optionAddrMapper.set("3", [{ value: "10", name: "圣贤林" }, { value: "11", name: "青冥天下" }, { value: "12", name: "藕花福地" }]);
    93.             },
    94.             handleAdd(index, row) {
    95.                 this.tableData.push({
    96.                     date: '',
    97.                     name: '',
    98.                     addr: ''
    99.                 });
    100.             },
    101.             handleDelete(index, row) {
    102.                 if (index > 0) {
    103.                     this.tableData.splice(index, 1);
    104.                 }
    105.             },
    106.             tableRowClassName({ row, rowIndex }) {
    107.                 if ((rowIndex + 1) % 2 === 1) {
    108.                     return 'warning-row';
    109.                 } else {
    110.                     return 'success-row';
    111.                 }
    112.                 return '';
    113.             }
    114.         },
    115.         props: {},
    116.         computed: {},
    117.  
    118.         created() {
    119.  
    120.         },
    121.         watch: {},
    122.     })
    123. </script>
    124. <style>
    125.     .el-table .warning-row {
    126.         background: oldlace;
    127.     }
    128.  
    129.     .el-table .success-row {
    130.         background: #f0f9eb;
    131.     }
    132. </style>
    133.  
    134. </html>
  • 表格整体与编辑视图的切换，双击表格，或进行视图切换。可以编辑也可以展示 
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <!-- import CSS -->
    7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    8.     <!-- import Vue before Element -->
    9.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
    10.     <!-- import JavaScript -->
    11.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    12.     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    13. </head>
    14.  
    15. <body style="display: flex;justify-content: center;width: 100%;">
    16.     <div id="app">
    17.         <el-card>
    18.             <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
    19.                 @cell-dblclick="editdbClick">
    20.                 <el-table-column prop="date" label="日期" width="180">
    21.                     <template slot-scope="scope">
    22.                         <el-select v-show="!isVlable" popper-class="role-option" v-model="scope.row.date"
    23.                             placeholder="请选择" size="small" @change="dateHandleChange">
    24.                             <el-option v-for="item in optionData" :key="item.name" :label="item.name"
    25.                                 :value="item.value"></el-option>
    26.                         </el-select>
    27.                         <span style="line-height: 32px;" v-show="isVlable">{{ optionDataf(scope.row.date)}} </span>
    28.                     </template>
    29.                 </el-table-column>
    30.                 <el-table-column prop="name" label="姓名" width="180">
    31.                     <template slot-scope="scope">
    32.                         <el-select v-show="!isVlable && scope.row.date != '2' " popper-class="role-option"
    33.                             v-model="scope.row.name" placeholder="请选择" size="small">
    34.                             <el-option v-for="item in optionName" :key="item.name" :label="item.name"
    35.                                 :value="item.value"></el-option>
    36.                         </el-select>
    37.                         <span style="line-height: 32px;" v-show="isVlable">{{optionNamef(scope.row.name) }} </span>
    38.                     </template>
    39.                 </el-table-column>
    40.                 <el-table-column prop="addr" width="180" label="地址">
    41.                     <template slot-scope="scope">
    42.                         <el-select v-show="!isVlable" popper-class="role-option" v-model="scope.row.addr"
    43.                             placeholder="请选择" size="small">
    44.                             <el-option v-for="item in optionsAddr(scope.row)" :key="item.name" :label="item.name"
    45.                                 :value="item.value"></el-option>
    46.                         </el-select>
    47.                         <span style="line-height: 32px;" v-show="isVlable">{{optionsAddrf(scope.row.addr) }}
    48.                         </span>
    49.                     </template>
    50.                 </el-table-column>
    51.                 <el-table-column label="操作" width="100" header-align="right">
    52.                     <template slot-scope="scope">
    53.                         <div style="display: flex;justify-content: space-between;">
    54.                             <el-link icon="el-icon-plus" size="mini" type="primary"
    55.                                 @click="handleAdd(scope.$index, scope.row)" :underline="false"
    56.                                 style="font-size: 14px;margin-left: 40px"></el-link>
    57.                             <el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"
    58.                                 type="danger" :underline="false"></el-link>
    59.                         </div>
    60.                     </template>
    61.                 </el-table-column>
    62.             </el-table>
    63.         </el-card>
    64.     </div>
    65. </body>
    66. <script>
    67.  /**
    68.     * @description: 表格与编辑视图的切换，双击表格，或进行视图切换。可以编辑也可以展示。
    69.     * @author: Liruilong
    70.     */
    71.     new Vue({
    72.         el: '#app',
    73.         data() {
    74.             return {
    75.                 isVlable: false,
    76.                 optionData: [{ value: "1", name: "2016-05-03" }, { value: "2", name: "2016-05-04" }, { value: "3", name: "2016-05-05" }],
    77.                 optionName: [{ value: "1", name: " 王小虎" }, { value: "2", name: "王小龙" }, { value: "3", name: "王小狗" }],
    78.                 optionAddr:[{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }],
    79.                 tableData: [{
    80.                     date: '1',
    81.                     name: '1',
    82.                     addr: '1',
    83.                 }],
    84.                 optionAddrMapper: new Map(),
    85.                 date: '',
    86.                 name: '',
    87.                 address: '',
    88.             }
    89.         },
    90.         created() {
    91.  
    92.         },
    93.         mounted() {
    94.              // 模拟ajax初始化数据集
    95.              this.optionAddrMapper.set("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
    96.         },
    97.         methods: {
    98.             optionDataf(id) {
    99.                 let name = id;
    100.                 this.optionData.forEach((element) => {
    101.  
    102.                     if (element.value == id) {
    103.                         name = element.name;
    104.                     }
    105.                 });
    106.                 return name;
    107.             },
    108.             optionNamef(id) {
    109.                 let name = id;
    110.                 this.optionName.forEach((element) => {
    111.                     if (element.value == id) {
    112.                         name = element.name;
    113.                     }
    114.                 });
    115.                 return name;
    116.             },
    117.             optionsAddrf(id) {
    118.                 let name = id;
    119.               if(this.optionAddrMapper){
    120.                 this.optionAddrMapper.forEach((value, key) => {
    121.                     value.forEach((e) => {
    122.                         if (e.value == id) {
    123.                             name = e.name;
    124.                         }
    125.                     })
    126.                 });
    127.             }else{
    128.                 this.optionAddr.forEach( e =>{
    129.                     if (e.value == id) {
    130.                             name = e.name;
    131.                         }
    132.                 });
    133.             }
    134.                 return name;
    135.             },
    136.             editdbClick(row, column, cell, event) {
    137.                 this.isVlable = !this.isVlable;
    138.             },
    139.             saveClick(row, column, cell, event) {
    140.             },
    141.             optionsAddr(row) {
    142.                 return this.optionAddrMapper.get(row.date);
    143.             },
    144.             //联动处理//模拟ajax调用接口获取数据.日期选择会联动地址
    145.             dateHandleChange(val) {
    146.                 // 模拟根据日期得到地址的数据集 这里写ajax ，必须是同步的请求。
    147.                 this.optionAddrMapper.set("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
    148.                 this.optionAddrMapper.set("2", [{ value: "9", name: "西域" }, { value: "8", name: "苗疆" }, { value: "7", name: "剑气长城" }]);
    149.                 this.optionAddrMapper.set("3", [{ value: "10", name: "圣贤林" }, { value: "11", name: "青冥天下" }, { value: "12", name: "藕花福地" }]);
    150.             },
    151.             // 添加操作。默认会保存当前行的数据，并添加一条新数据
    152.             handleAdd(index, row) {
    153.  
    154.                 if ((row.date && row.name && row.addr) || (row.date && row.addr)) {
    155.                     this.tableData.push({
    156.                         date: '',
    157.                         name: '',
    158.                         addr: ''
    159.                     });
    160.                 }
    161.             },
    162.             handleDelete(index, row) {
    163.                 debugger
    164.                 if (index > 0) {
    165.                     this.tableData.splice(index, 1);
    166.                 }
    167.             },
    168.             tableRowClassName({ row, rowIndex }) {
    169.                 row.index = rowIndex;
    170.                 if ((rowIndex + 1) % 2 === 1) {
    171.                     return 'warning-row';
    172.                 } else {
    173.                     return 'success-row';
    174.                 }
    175.                 return '';
    176.             }
    177.         },
    178.         props: {},
    179.         computed: {},
    180.  
    181.         created() {
    182.  
    183.         },
    184.         watch: {},
    185.         filters: {
    186.  
    187.         },b
    188.  
    189.     })
    190. </script>
    191. <style>
    192.     .el-table .warning-row {
    193.         background: oldlace;
    194.     }
    195.  
    196.     .el-table .success-row {
    197.         background: #f0f9eb;
    198.     }
    199. </style>
    200.  
    201. </html>
  • 行编辑视图手动切换，通过双击表格实现编辑的表格的切换。 
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <!-- import CSS -->
    7.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    8.     <!-- import Vue before Element -->
    9.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
    10.     <!-- import JavaScript -->
    11.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    12.     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    13. </head>
    14.  
    15. <body style="display: flex;justify-content: center;width: 100%;">
    16.     <div id="app">
    17.         <el-card>
    18.             <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
    19.                 @cell-dblclick="editdbClick">
    20.                 <el-table-column prop="date" label="日期" width="180">
    21.                     <template slot-scope="scope">
    22.                         <el-select v-show="!showEdit[scope.$index]" popper-class="role-option" v-model="scope.row.date"
    23.                             placeholder="请选择" size="small" @change="dateHandleChange">
    24.                             <el-option v-for="item in optionData" :key="item.name" :label="item.name"
    25.                                 :value="item.value"></el-option>
    26.                         </el-select>
    27.                         <span style="line-height: 32px;"
    28.                             v-show="showEdit[scope.$index]">{{ optionDataf(scope.row.date)}} </span>
    29.                     </template>
    30.                 </el-table-column>
    31.                 <el-table-column prop="name" label="姓名" width="180">
    32.                     <template slot-scope="scope">
    33.                         <el-select v-show="!showEdit[scope.$index] && scope.row.date != '2' " popper-class="role-option"
    34.                             v-model="scope.row.name" placeholder="请选择" size="small">
    35.                             <el-option v-for="item in optionName" :key="item.name" :label="item.name"
    36.                                 :value="item.value"></el-option>
    37.                         </el-select>
    38.                         <span style="line-height: 32px;"
    39.                             v-show="showEdit[scope.$index]">{{optionNamef(scope.row.name) }} </span>
    40.                     </template>
    41.                 </el-table-column>
    42.                 <el-table-column prop="addr" width="180" label="地址">
    43.                     <template slot-scope="scope">
    44.                         <el-select v-show="!showEdit[scope.$index]" popper-class="role-option" v-model="scope.row.addr"
    45.                             placeholder="请选择" size="small">
    46.                             <el-option v-for="item in optionsAddr(scope.row)" :key="item.name" :label="item.name"
    47.                                 :value="item.value"></el-option>
    48.                         </el-select>
    49.                         <span style="line-height: 32px;"
    50.                             v-show="showEdit[scope.$index]">{{optionsAddrf(scope.row.addr) }}
    51.                         </span>
    52.                     </template>
    53.                 </el-table-column>
    54.                 <el-table-column label="操作" width="100" header-align="right">
    55.                     <template slot-scope="scope">
    56.                         <div style="display: flex;justify-content: space-between;">
    57.                             <el-link icon="el-icon-plus" size="mini" type="primary"
    58.                                 @click="handleAdd(scope.$index, scope.row)" :underline="false"
    59.                                 style="font-size: 14px;margin-left: 40px"></el-link>
    60.                             <el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"
    61.                                 type="danger" :underline="false"></el-link>
    62.                         </div>
    63.                     </template>
    64.                 </el-table-column>
    65.             </el-table>
    66.         </el-card>
    67.     </div>
    68. </body>
    69. <script>
    70.  /**
    71.     * @description: 双击行视图手动切换，通过双击表格实现编辑的表格的切换
    72.     * @author: Liruilong
    73.     */
    74.     new Vue({
    75.         el: '#app',
    76.         data() {
    77.             return {
    78.                 optionData: [{ value: "1", name: "2016-05-03" }, { value: "2", name: "2016-05-04" }, { value: "3", name: "2016-05-05" }],
    79.                 optionName: [{ value: "1", name: " 王小虎" }, { value: "2", name: "王小龙" }, { value: "3", name: "王小狗" }],
    80.                 optionAddr: [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }],
    81.                 tableData: [{
    82.                     date: '1',
    83.                     name: '1',
    84.                     addr: '1',
    85.                 }],
    86.                 optionAddrMapper: new Map(),
    87.                 date: '',
    88.                 name: '',
    89.                 address: '',
    90.                 showEdit: [false],
    91.             }
    92.         },
    93.         created() {
    94.  
    95.         },
    96.         mounted() {
    97.             // 模拟ajax初始化数据集
    98.             this.optionAddrMapper.set("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
    99.         },
    100.         methods: {
    101.             optionDataf(id) {
    102.                 let name = id;
    103.                 this.optionData.forEach((element) => {
    104.  
    105.                     if (element.value == id) {
    106.                         name = element.name;
    107.                     }
    108.                 });
    109.                 return name;
    110.             },
    111.             optionNamef(id) {
    112.                 let name = id;
    113.                 this.optionName.forEach((element) => {
    114.                     if (element.value == id) {
    115.                         name = element.name;
    116.                     }
    117.                 });
    118.                 return name;
    119.             },
    120.             optionsAddrf(id) {
    121.                 let name = id;
    122.                 if (this.optionAddrMapper) {
    123.                     this.optionAddrMapper.forEach((value, key) => {
    124.                         value.forEach((e) => {
    125.                             if (e.value == id) {
    126.                                 name = e.name;
    127.                             }
    128.                         })
    129.                     });
    130.                 } else {
    131.                     this.optionAddr.forEach(e => {
    132.                         if (e.value == id) {
    133.                             name = e.name;
    134.                         }
    135.                     });
    136.                 }
    137.                 return name;
    138.             },
    139.             editdbClick(row, column, cell, event) {
    140.  
    141.                 if ((row.date && row.name && row.addr) || (row.date && row.addr)) {
    142.                     this.$set(this.showEdit, row.index, !this.showEdit[row.index])
    143.                 }
    144.  
    145.             },
    146.             // openShow(index){
    147.             //     this.showEdit.forEach( (e) =>{
    148.             //         if(e != index){
    149.             //             this.$set(this.showEdit, e, false)
    150.             //         }
    151.  
    152.             //     })
    153.             // },
    154.             saveClick(row, column, cell, event) {
    155.             },
    156.             optionsAddr(row) {
    157.                 return this.optionAddrMapper.get(row.date);
    158.             },
    159.             //联动处理//模拟ajax调用接口获取数据.日期选择会联动地址
    160.             dateHandleChange(val) {
    161.                 // 模拟根据日期得到地址的数据集 这里写ajax ，必须是同步的请求。
    162.                 this.optionAddrMapper.set("1", [{ value: "1", name: "北凉" }, { value: "2", name: "西北道" }, { value: "3", name: "泰安城" }]);
    163.                 this.optionAddrMapper.set("2", [{ value: "9", name: "西域" }, { value: "8", name: "苗疆" }, { value: "7", name: "剑气长城" }]);
    164.                 this.optionAddrMapper.set("3", [{ value: "10", name: "圣贤林" }, { value: "11", name: "青冥天下" }, { value: "12", name: "藕花福地" }]);
    165.             },
    166.             // 添加操作。默认会保存当前行的数据，并添加一条新数据
    167.             handleAdd(index, row) {
    168.                 let data = this.tableData[this.tableData.length - 1];
    169.                 if (((row.date && row.name && row.addr) || (row.date && row.addr)) && ((data.date && data.name && data.addr) || (data.date && data.addr))) {
    170.                     this.$set(this.showEdit, row.index, true)
    171.                     this.tableData.push({
    172.                         date: '',
    173.                         name: '',
    174.                         addr: ''
    175.                     });
    176.                     this.$set(this.showEdit, row.index + 1, false)
    177.                 }
    178.             },
    179.             handleDelete(index, row) {
    180.                 debugger
    181.                 if (index > 0) {
    182.                     this.tableData.splice(index, 1);
    183.                 }
    184.             },
    185.             tableRowClassName({ row, rowIndex }) {
    186.                 row.index = rowIndex;
    187.                 if ((rowIndex + 1) % 2 === 1) {
    188.                     return 'warning-row';
    189.                 } else {
    190.                     return 'success-row';
    191.                 }
    192.                 return '';
    193.             }
    194.         },
    195.         props: {},
    196.         computed: {},
    197.  
    198.         created() {
    199.  
    200.         },
    201.         watch: {},
    202.         filters: {
    203.  
    204.         },
    205.  
    206.     })
    207. </script>
    208. <style>
    209.     .el-table .warning-row {
    210.         background: oldlace;
    211.     }
    212.  
    213.     .el-table .success-row {
    214.         background: #f0f9eb;
    215.     }
    216. </style>
    217.  
    218. </html>
  • 单机视图自动切换，即只留一条要编辑的操作。这个和之前的原理不一样，通过样式控制。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <!-- import CSS -->
    6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.     <!-- import Vue before Element -->
    8.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
    9.     <!-- import JavaScript -->
    10.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    11. </head>
    12.  
    13. <body style="display: flex;justify-content: center;width: 100%;margin-top: 20px;">
    14.     <div id="app">
    15.         <el-card>
    16.             <!-- 关键代码 highlight-current-row -->
    17.             <el-table :data="tableData" style="width: 100%" class="tb-edit"  highlight-current-row @row-click="handleCurrentChange" :row-class-name="tableRowClassName" >
    18.                 <el-table-column prop="date" label="日期" width="180">
    19.                     <template slot-scope="scope">
    20.                         <el-input size="small" v-model="scope.row.date" placeholder="请输入内容"
    21.                             @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
    22.                     </template>
    23.                 </el-table-column>
    24.                 <el-table-column prop="name" label="姓名" width="180">
    25.                     <template slot-scope="scope">
    26.                         <el-input size="small" v-model="scope.row.name" placeholder="请输入内容"
    27.                             @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
    28.                     </template>
    29.                 </el-table-column>
    30.                 <el-table-column prop="addr" width="180" label="地址">
    31.                     <template slot-scope="scope">
    32.                         <el-input size="small" v-model="scope.row.addr" placeholder="请输入内容"
    33.                             @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.addr}}</span>
    34.                     </template>
    35.                 </el-table-column>
    36.                 <el-table-column label="操作" width="100" header-align="right">
    37.                     <template slot-scope="scope">
    38.                         <div style="display: flex;justify-content: space-between;">
    39.                             <el-link icon="el-icon-plus" size="mini" type="primary"
    40.                                 @click="handleAdd(scope.$index, scope.row)" :underline="false"
    41.                                 style="font-size: 14px;margin-left: 40px"></el-link>
    42.                             <el-link icon="el-icon-delete" size="mini" @click="handleDelete(scope.$index, scope.row)"
    43.                                 type="danger" :underline="false"></el-link>
    44.                         </div>
    45.                     </template>
    46.                 </el-table-column>
    47.             </el-table>
    48.         </el-card>
    49.     </div>
    50. </body>
    51. <script>
    52.     /**
    53.     * @description: 单机视图自动切换，即只留一条要编辑的操作。这个和之前的原理不一样，通过样式控制。
    54.     * @author: Liruilong
    55.     */
    56.     new Vue({
    57.         el: '#app',
    58.         data() {
    59.             return {
    60.                 tableData: [{
    61.                     date: '2016-05-02',
    62.                     name: '王小虎',
    63.                     addr: '北凉',
    64.                 }, {
    65.                     date: '2016-05-04',
    66.                     name: '王小狗',
    67.                     addr: '西北道'
    68.                 }, {
    69.                     date: '2016-05-04',
    70.                     name: '王小狗',
    71.                     addr: '西北道'
    72.                 }, {
    73.                     date: '2016-05-04',
    74.                     name: '王小狗',
    75.                     addr: '西北道'
    76.                 }]
    77.             }
    78.         },
    79.         mounted() {
    80.  
    81.         },
    82.         methods: {
    83.             handleCurrentChange(row, event, column) {
    84.                 console.log(row, event, column, event.currentTarget)
    85.                 console.log("根据 Element Table @row-click=handleCurrentChange 事件，当该行点击的时候会动态添加一个 .current-row 的class属性，然后在 css 中进行 display 控制就行了。")
    86.             },
    87.             handleAdd(index, row) {
    88.                 this.tableData.push({
    89.                     date: '',
    90.                     name: '',
    91.                     addr: ''
    92.                 });
    93.             },
    94.             handleDelete(index, row) {
    95.                 if (index > 0) {
    96.                     this.tableData.splice(index, 1);
    97.                 }
    98.             },
    99.             tableRowClassName({ row, rowIndex }) {
    100.                 row.index = rowIndex;
    101.                 if ((rowIndex + 1) % 2 === 1) {
    102.                     return 'warning-row';
    103.                 } else {
    104.                     return 'success-row';
    105.                 }
    106.                 return '';
    107.             }
    108.         },
    109.  
    110.         props: {},
    111.         computed: {},
    112.  
    113.         created() {
    114.  
    115.         },
    116.         watch: {},
    117.     })
    118. </script>
    119. <style>
    120.     .el-table .warning-row {
    121.         background: oldlace;
    122.     }
    123.  
    124.     .el-table .success-row {
    125.         background: #f0f9eb;
    126.     }
    127.     .tb-edit .el-input {
    128.         display: none
    129.     }
    130.  
    131.     .tb-edit .current-row .el-input {
    132.         display: block
    133.     }
    134.  
    135.     .tb-edit .current-row .el-input+span {
    136.         display: none
    137.     }
    138. </style>
    139.  
    140. </html>

ElementUI表格行编辑单元格编辑支持（输入框，选择框）Demo的更多相关文章

  1. ExtJs GridPanel 给表格行或者单元格自定义样式

    Ext.onReady(function(){ Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'ema ...

  2. jqGrid单元格编辑配置，事件及方法

    转自 http://blog.csdn.net/xueshijun666/article/details/18151055 // var ret = $("#in_store_list_de ...

  3. FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架

    这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...

  4. Bootstrap：Bootstrap_table第一篇：快速用bootstrap_table（支持参数）筛选并展示数据，固定表格前几列，实现表格单元格编辑

    1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

  5. Swift - 可编辑表格样例（可直接编辑单元格中内容、移动删除单元格）

    (本文代码已升级至Swift3)   本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...

  6. Datagrid扩展方法InitEditGrid{支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  7. Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  8. Swift - 给表格添加移动单元格功能（拖动行）

    1,下面的样例是给表格UITableView添加单元格移动功能: (1)给表格添加长按功能,长按后表格进入编辑状态  (2)在编辑状态下,可以看到单元格后面出现拖动按钮  (3)鼠标按住拖动按钮,可以 ...

  9. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

随机推荐

  1. Vue路由History模式分析

    Vue路由History模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以 ...

  2. mycat 单库分表实践

    参考 https://blog.csdn.net/sq2006hjp/article/details/78732227 Mycat采用的水平拆分,不管是分库还是分表,都是水平拆分的.分库是指,把一个大 ...

  3. 【git】关联本地仓库与远程仓库

    1.在远程建立一个空项目[项目名称]2.git init3.git remote add origin [git 地址]4.git pull origin master5.git push origi ...

  4. TiOps，支持容器，支持多云安全远程运维，疫情期间免费开放，助力远程办公

    TiOps,支持多云环境安全远程运维,疫情期间免费对外开放在疫情期间,为减少疾病传染可能性,许多公司的选择了在家远程办公.对于运维来说,既要远程运维,又要保证安全,还要在复杂的IT环境中保持高效,面临 ...

  5. ERP订单管理的操作与设计--开源软件诞生19

    赤龙ERP订单模块讲解--第19篇 用日志记录"开源软件"的诞生 [点亮星标]----祈盼着一个鼓励 博主开源地址: 码云:https://gitee.com/redragon/r ...

  6. python 递归求和

    例子: 1 mylist = [1,2,3,4,5] 2 def func(var): 3 if var == []: 4 print('列表为空') 5 return 0 6 return var[ ...

  7. CSP-S2020AFO记

    2020-10.11 考初赛辣. 选择题考了一堆时间复杂度,一个不会(卒) 我寻思这01背包哪里能用贪心? 啊,这,这,这手写快排竟如此简单,手写取Max,手写队列,两个字符串颠来倒去,竟活到爆! 震 ...

  8. 实时离线一体化在资产租赁saas服务中使用

    流水查询需求 需求第一期: 基于TB级的在线数据,支持缴费帐单明细在线查询.大家都知道,像银行帐单流水一样,查几年的流水是常有的事. 支持的维度查询:帐期.欠费状态.日期范围.费用科目类型.房屋分类. ...

  9. rabbitmq 延时队列

    前言 某个产品 或者订单,有个有效期 过了有效期要取消 方法一 : 写个脚本,用crontab 定时扫描 改变状态 但是最低只能一分钟 ,不适合 方法二 : 用swoole得毫秒定时器,每秒钟去扫描表 ...

  10. swoole创建进程

    <?php /** * Created by PhpStorm. * User: mac * Date: 2020/4/23 * Time: 21:57 */ use Swoole\Proces ...