vue之带多选框的表格demo

矫情吗；* 2021-09-24 03:30 450阅读 0赞

最近在用vue做项目，下面就来分享一个带一列多选按钮的表格demo，有需要的小伙伴尽管拿走：

效果图如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDAzMDYz_size_16_color_FFFFFF_t_70]  
代码如下所示：

<template>
        <div>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content" style="margin-top:20px;">
                        <el-button>新建</el-button>
                        <el-button>删除</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="grid-content">
                        <el-table
                            :data="tableData"
                            height="250"
                            border
                            style="width: 100%">
                                <el-table-column
                                    label="全选"
                                    width="50"
                                    :render-header="renderHeader">
                                    <el-checkbox></el-checkbox>
                                </el-table-column>
                                <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="address"
                                    label="地址">
                                </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </template>
    
    <script>
    
    export default { 
      data() { 
        return { 
          input: '',
          radio: '1',
          checkAll: false,
          checkedCities: [],
          isIndeterminate: true,
          tableData: [{ 
              str:<el-checkbox></el-checkbox>,
              date: '2020-04-08',
              name: 'wxy_jdhk',
              address: '北京市海淀区**路**号',
            }, { 
              str:<el-checkbox></el-checkbox>,
              date: '2020-04-08',
              name: 'wxy_jdhk',
              address: '北京市海淀区**路**号',
            }, { 
              str:<el-checkbox></el-checkbox>,
              date: '2020-04-08',
              name: 'wxy_jdhk',
              address: '北京市海淀区**路**号',
            }, { 
              str:<el-checkbox></el-checkbox>,
              date: 'wxy_jdhk',
              name: '王小二',
              address: '北京市海淀区**路**号',
            }]
        }
      },
      methods: { 
          tableRowClassName({ row, rowIndex}) { 
            if (rowIndex === 1) { 
              return 'warning-row';
            } else if (rowIndex === 3) { 
              return 'success-row';
            }
            return '';
          },
          handleCheckAllChange(val) { 
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
          },
          handleCheckedCitiesChange(value) { 
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
          },
          renderHeader(h, params) { 
                    let a = [h('el-checkbox', { 
                        props: { 
                            size: "mini",
                            type: "primary"
                        },
                        on: { 
                            click: () => { 
                                this.renderAddRow();
                            }
                        }
                    }, '')];
                    return h('div', a);
                },
        }
    }
    </script>
    <style scoped>
      .el-table .warning-row { 
        background: oldlace;
      }
    
      .el-table .success-row { 
        background: #f0f9eb;
      }
      .el-row { 
        margin-bottom: 20px;
        &:last-child { 
          margin-bottom: 0;
        }
      }
      .el-col { 
        border-radius: 4px;
      }
      .bg-purple-dark { 
        background: #99a9bf;
      }
      .bg-purple { 
        background: #d3dce6;
      }
      .bg-purple-light { 
        background: #e5e9f2;
      }
      .grid-content { 
        border-radius: 4px;
        min-height: 36px;
        margin-left:20px; 
        margin-right:20px;
      }
      .row-bg { 
        padding: 10px 0;
        background-color: #f9fafc;
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDAzMDYz_size_16_color_FFFFFF_t_70]: /images/20210923/61a3407723c04e639133ce340d0a357c.png