cnbmai-ui-doc/src/views/table/singleHead.vue

<template>
  <div class="single-head">
    <h2>单表头表格</h2>
    <div class="demo-box">
      <h3>基础表格</h3>
      <base-table
        :table-props="tableProps"
        :table-data="tableData"
        :page="1"
        :limit="20"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            <code>page</code
            >和<code>limit</code>两个参数加上可以给表格第一列加上序号，
            第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义，默认为70，参数为<code>pageWidth</code>,类型为<code
              >Number</code
            >
            默认序号列是左侧固定的，如果需要取消固定可以传入参数<code>cancelPageFixed</code>值为<code>true</code>，elementUI提供了<code>doLayout</code>函数，对
            Table 进行重新布局。当 Table
            或其祖先元素由隐藏切换为显示时，可能需要调用此方法，具体用法如下demo
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table
                  ref="baseTable1"
                  id="baseTable"
                  :table-props="tableProps"
                  :page="1"
                  :limit="20"
                  :table-data="tableData"
                /&gt;
              &lt;<span>/template</span>&gt;
              &lt;script&gt;
              const tableProps = [
                {
                  prop: 'date',
                  label: '日期'
                },
                {
                  prop: 'name',
                  label: '姓名'
                },
                {
                  prop: 'sex',
                  label: '性别'
                },
                {
                  prop: 'age',
                  label: '年龄'
                },
                {
                  prop: 'address',
                  label: '地址'
                }
              ]
              export default {
                data() {
                  return {
                    tableProps,
                    tableData: [{
                      date: '2016-05-02',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                      date: '2016-05-04',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1517 弄'
                    },
                    {
                      date: '2016-05-01',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                      date: '2016-05-03',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1516 弄'
                    }]
                  }
                }
              },
              methods: {
                doLayout() {
                  this.$refs.baseTable1.doLayout('baseTable')
                }
              }
              &lt;/script&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>不带边框和带斑马纹表格</h3>
      <base-table
        :table-props="tableProps"
        :table-data="tableData"
        stripe
        :page="1"
        :limit="20"
        :cancel-border="true"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            <code>stripe</code>属性可以创建带斑马纹的表格。它接受一个
            <code>Boolean</code>，默认为<code>false</code>，
            设置为<code>true</code>即为启用。默认情况下，Table
            组件是有竖直方向的边框的，如果需要取消，可以使用<code>cancel-border</code>属性，它接受一个<code>Boolean</code>，设置为<code>true</code>即可取消边框。
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table
                  :table-props="tableProps"
                  :page="1"
                  :limit="20"
                  :table-data="tableData"
                  stripe
                  :cancel-border="true"
                /&gt;
              &lt;<span>/template</span>&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>带状态表格</h3>
      <base-table
        :table-props="tableProps"
        :table-data="tableData"
        :row-class-name="tableRowClassName"
        :page="1"
        :limit="20"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            可以通过指定 Table 组件的 <code>row-class-name</code>
            属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table
                  :table-props="tableProps"
                  :table-data="tableData"
                  :row-class-name="tableRowClassName"
                  :page="1"
                  :limit="20"
                /&gt;
              &lt;<span>/template</span>&gt;
              &lt;style&gt;
                .el-table .warning-row {
                  background: oldlace;
                }

                .el-table .success-row {
                  background: #f0f9eb;
                }
              &lt;/style&gt;
              &lt;script&gt;
                export default {
                  methods: {
                    tableRowClassName({row, rowIndex}) {
                      if (rowIndex === 1) {
                        return 'warning-row';
                      } else if (rowIndex === 3) {
                        return 'success-row';
                      }
                      return '';
                    }
                  }
                }
              &lt;script&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>固定列和表头，列字数多显示不下...</h3>
      <base-table
        :table-props="tableProps2"
        :table-data="tableData"
        :page="1"
        :limit="20"
        style="width: 800px"
        height="150"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            只要在<code>el-table</code>元素中定义了<code>height</code>属性，即可实现固定表头的表格，而不需要额外的代码。
            固定列需要使用<code>fixed</code>属性，它接受<code>Boolean</code>值或者<code>leftright</code>，表示左边固定还是右边固定。
            默认情况下若内容过多会折行显示，若需要单行显示可以使用<code>showOverflowtooltip</code>属性，它接受一个<code>Boolean</code>，为true时多余的内容会在
            hover 时以 tooltip 的形式显示出来。
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table
                  :table-props="tableProps"
                  :table-data="tableData"
                  :page="1"
                  :limit="20"
                  style="width: 800px"
                  height="150"
                /&gt;
              &lt;<span>/template</span>&gt;
              &lt;script&gt;
              const tableProps = [
                {
                  prop: 'date',
                  label: '日期',
                  fixed: true,
                  width: '200'
                },
                {
                  prop: 'name',
                  label: '姓名',
                  width: '200'
                },
                {
                  prop: 'sex',
                  label: '性别',
                  width: '200'
                },
                {
                  prop: 'age',
                  label: '年龄',
                  width: '200'
                },
                {
                  prop: 'address',
                  label: '地址',
                  showOverflowtooltip: true
                }
              ]
              export default {
                data() {
                  return {
                    tableProps,
                    tableData: [{
                      date: '2016-05-02',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                      date: '2016-05-04',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1517 弄'
                    },
                    {
                      date: '2016-05-01',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                      date: '2016-05-03',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1516 弄'
                    }]
                  }
                }
              }
              &lt;/script&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>流体高度</h3>
      <p>当数据量动态变化时，可以为 Table 设置一个最大高度。</p>
      <base-table
        :table-props="tableProps"
        :table-data="tableData"
        :page="1"
        :limit="20"
        max-height="150"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            <code>page</code
            >和<code>limit</code>两个参数加上可以给表格第一列加上序号，
            第一列的图标可以控制表格列的显示和隐藏。序号列的宽度可以自定义，默认为70，参数为<code>pageWidth</code>,类型为<code
              >Number</code
            >
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table
                  :table-props="tableProps"
                  :page="1"
                  :limit="20"
                  :table-data="tableData"
                  max-height="150"
                /&gt;
              &lt;<span>/template</span>&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>单选</h3>
      <el-button size="small" @click="setCurrent(1)">选中第二行</el-button>
      <el-button size="small" @click="setCurrent(-1)">取消选中</el-button>
      <base-table
        ref="palletTable1"
        id="palletTable"
        :table-props="tableProps"
        :table-data="tableData"
        :page="1"
        :limit="20"
        highlight-current-row
        @current-change="handleCurrentChange"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            Table
            组件提供了单选的支持，只需要配置<code>highlight-current-row</code>属性即可实现单选。
            之后由<code>current-change</code>事件来管理选中时触发的事件，它会传入<code>currentRow</code>，<code>oldCurrentRow</code>。
            使用按钮选中取消，必须要传id,id的值是唯一的，id的值需要和<code>setCurrent</code>中第一参数一样。
          </div>
          <div>
            <pre>
              &lt;el-button size="small" @click="setCurrent(1)"&gt;选中第二行&lt;/el-button&gt;
              &lt;el-button size="small" @click="setCurrent(-1)"&gt;取消选中&lt;/el-button&gt;
              &lt;<span>template</span>&gt;
                &lt;base-table
                  ref="palletTable1"
                  id="palletTable"
                  :table-props="tableProps"
                  :table-data="tableData"
                  :page="1"
                  :limit="20"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                /&gt;
              &lt;<span>/template</span>&gt;
              methods:
              setCurrent(index) {
                this.$refs.palletTable1.setCurrent('palletTable', index)
              }
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>多选</h3>
      <p>
        在base-table上监听事件selection-change @selection-change="selectChange"
      </p>
      <base-table
        :table-props="tableProps"
        :table-data="tableData"
        :selectWidth="55"
        :page="1"
        :limit="20"
        @selection-change="selectChange"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            实现多选非常简单:添加一个<code>selectWidth</code>的宽度就可以,之后由<code>selection-change</code>来管理事件。
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table
                  :table-props="tableProps"
                  :table-data="tableData"
                  :selectWidth="55"
                  :page="1"
                  :limit="20"
                  @selection-change="selectChange"
                /&gt;
              &lt;<span>/template</span>&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>排序</h3>
      <p>
        在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。其他排序暂不支持
      </p>
    </div>
    <div class="demo-box">
      <h3>自定义列模板</h3>
      <base-table :table-props="tableProps2" :table-data="tableData" />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            通过<code>subcomponent</code>来加载模板组件
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table :table-props="tableProps" :table-data="tableData" /&gt;
              &lt;<span>/template</span>&gt;
              &lt;script&gt;
              const tableProps = [
                {
                  prop: 'date',
                  label: '日期'
                },
                {
                  prop: 'name',
                  label: '姓名',
                  subcomponent: demo1Sub
                },
                {
                  prop: 'sex',
                  label: '性别'
                },
                {
                  prop: 'age',
                  label: '年龄'
                },
                {
                  prop: 'address',
                  label: '地址'
                }
              ]
              export default {
                data() {
                  return {
                    tableProps,
                    tableData: [{
                      date: '2016-05-02',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                      date: '2016-05-04',
                      name: '王小虎',
                      sex: '男',
                      age: 28,
                      address: '上海市普陀区金沙江路 1517 弄'
                    },
                    {
                      date: '2016-05-01',
                      name: '王小虎',
                      sex: '男',
                      age: 19,
                      address: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                      date: '2016-05-03',
                      name: '王小虎',
                      sex: '男',
                      age: 31,
                      address: '上海市普陀区金沙江路 1516 弄'
                    }]
                  }
                }
              }
              &lt;/script&gt;
              附上demo1Sub的代码
              &lt;template&gt;
                &lt;div&gt;
                  &lt;el-tag size="medium"&gt;'{'{
                injectData.name
              }'}'&lt;/el-tag&gt;
                &lt;/div&gt;
              &lt;/template&gt;
              &lt;script&gt;
              export default {
                name: 'demo1Sub',
                props: {
                  injectData: {
                    type: Object,
                    default: () => ({})
                  }
                }
              }
              &lt;/script&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>自定义列模板（操作列)</h3>
      <p>
        详情--detail 编辑---edit
        删除---delete,以上三个是显示图标，其他按钮显示中文字字，图标按上述传，自动加载图标。
      </p>
      <base-table :table-props="tableProps" :table-data="tableData">
        <method-btn
          v-if="tableBtn.length"
          slot="handleBtn"
          :width="200"
          label="操作"
          :method-list="tableBtn"
          @clickBtn="handleClick"
        />
      </base-table>
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            通过<code>method-btn</code>加载操作列按钮组件
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table :table-props="tableProps" :table-data="tableData" &gt;
                  &lt;method-btn
                    v-if="tableBtn.length"
                    slot="handleBtn"
                    :width="200"
                    label="操作"
                    :method-list="tableBtn"
                    @clickBtn="handleClick"
                  /&gt;
                &lt;/base-table&gt;
              &lt;<span>/template</span>&gt;
              &lt;script&gt;
              const tableProps = [
                {
                  prop: 'date',
                  label: '日期'
                },
                {
                  prop: 'name',
                  label: '姓名',
                },
                {
                  prop: 'sex',
                  label: '性别'
                },
                {
                  prop: 'age',
                  label: '年龄'
                },
                {
                  prop: 'address',
                  label: '地址'
                }
              ]
              export default {
                data() {
                  return {
                    tableProps,
                    tableData: [{
                      date: '2016-05-02',
                      name: '王小虎',
                      sex: '男',
                      age: 18,
                      address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                      date: '2016-05-04',
                      name: '王小虎',
                      sex: '男',
                      age: 28,
                      address: '上海市普陀区金沙江路 1517 弄'
                    },
                    {
                      date: '2016-05-01',
                      name: '王小虎',
                      sex: '男',
                      age: 19,
                      address: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                      date: '2016-05-03',
                      name: '王小虎',
                      sex: '男',
                      age: 31,
                      address: '上海市普陀区金沙江路 1516 弄'
                    }]
                  }
                }
              }
              &lt;/script&gt;
              附上tableBtn的代码
              const tableBtn = [
                {
                  type: 'start',
                  btnName: '开始',
                  showParam: {
                    type: '&',
                    data: [
                      {
                        type: 'more',
                        name: 'age',
                        value: 19
                      },
                      {
                        type: 'less',
                        name: 'age',
                        value: 30
                      }
                    ]
                  }
                },
                {
                  type: 'end',
                  btnName: '结束',
                  showParam: {
                    type: '&',
                    data: [
                      {
                        type: 'more',
                        name: 'age',
                        value: 19
                      },
                      {
                        type: 'less',
                        name: 'age',
                        value: 30
                      }
                    ]
                  }
                },
                {
                  type: 'detail',
                  btnName: '详情'
                },
                {
                  type: 'edit',
                  btnName: '编辑',
                  showParam: {
                    type: '&',
                    data: [
                      {
                        type: 'more',
                        name: 'age',
                        value: 19
                      },
                      {
                        type: 'less',
                        name: 'age',
                        value: 30
                      }
                    ]
                  }
                },
                {
                  type: 'delete',
                  btnName: '删除'
                }
              ]
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>树形数据</h3>
      <base-table
        :table-props="tableProps"
        :table-data="tableData4"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description">
            支持树类型的数据的显示。当 <code>row</code> 中包含
            <code>children</code>
            字段时，被视为树形数据。渲染树形数据时，必须要指定
            <code>row-key</code>。
          </div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table
                  :table-props="tableProps"
                  :table-data="tableData4"
                  row-key="id"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                /&gt;
              &lt;<span>/template</span>&gt;
              &lt;script&gt;
              this.tableData4 = [
                {
                  id: 1,
                  date: '2016-05-02',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                  id: 2,
                  date: '2016-05-04',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                  id: 3,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄',
                  children: [
                    {
                      id: 31,
                      date: '2016-05-01',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1519 弄',
                      children: [
                        {
                          id: 311,
                          date: '2016-05-01',
                          name: '王小虎',
                          address: '上海市普陀区金沙江路 1519 弄'
                        },
                        {
                          id: 321,
                          date: '2016-05-01',
                          name: '王小虎',
                          address: '上海市普陀区金沙江路 1519 弄'
                        }
                      ]
                    },
                    {
                      id: 32,
                      date: '2016-05-01',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1519 弄'
                    }
                  ]
                },
                {
                  id: 4,
                  date: '2016-05-03',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1516 弄'
                }
              ])
                export default {}
              &lt;script&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="demo-box">
      <h3>行内渲染表格innerTable</h3>
      <base-table
        :table-props="tableProps3"
        :table-data="tableData5"
        :page="1"
        :limit="20"
      />
      <el-collapse>
        <el-collapse-item title="显示代码">
          <div class="description"></div>
          <div>
            <pre>
              &lt;<span>template</span>&gt;
                &lt;base-table :table-props="tableProps" :table-data="tableData" :page="1"  :limit="20"/&gt;
              &lt;<span>/template</span>&gt;
              &lt;script&gt;
              const tableProps = [
                {
                  prop: 'date',
                  label: '日期'
                },
                {
                  prop: 'name',
                  label: '姓名'
                },
                {
                  prop: 'sex',
                  label: '性别'
                },
                {
                  prop: 'record',
                  label: '历史记录',
                  subcomponent: InnerTable
                },
                {
                  prop: 'address',
                  label: '地址'
                }
              ]
              export default {
                data() {
                  return {
                    tableProps,
                    tableData: [
                    {
                      id: 1,
                      date: '2016-05-02',
                      name: '王小虎',
                      sex: '男',
                      record: 18,
                      address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                      id: 2,
                      date: '2016-05-04',
                      name: '王小虎',
                      sex: '男',
                      record: 18,
                      address: '上海市普陀区金沙江路 1517 弄'
                    },
                    {
                      id: 3,
                      date: '2016-05-01',
                      name: '王小虎',
                      sex: '男',
                      record: 18,
                      address: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                      id: 4,
                      date: '2016-05-03',
                      name: '王小虎',
                      sex: '男',
                      record: 18,
                      address: '上海市普陀区金沙江路 1516 弄'
                    }
                  ])
                  }
                }
              }
              &lt;/script&gt;
              附上demo1Sub的代码
              &lt;template&gt;
                &lt;div&gt;
                  &lt;el-tag size="medium"&gt;'{'{
                injectData.name
              }'}'&lt;/el-tag&gt;
                &lt;/div&gt;
              &lt;/template&gt;
              &lt;script&gt;
              export default {
                name: 'demo1Sub',
                props: {
                  injectData: {
                    type: Object,
                    default: () => ({})
                  }
                }
              }
              &lt;/script&gt;
            </pre>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import demo1Sub from './components/demo1Sub'
import InnerTable from './components/InnerTable'
const tableBtn = [
  {
    type: 'start',
    btnName: '开始',
    showParam: {
      type: '&',
      data: [
        {
          type: 'more',
          name: 'age',
          value: 19
        },
        {
          type: 'less',
          name: 'age',
          value: 30
        }
      ]
    }
  },
  {
    type: 'end',
    btnName: '结束',
    showParam: {
      type: '&',
      data: [
        {
          type: 'more',
          name: 'age',
          value: 19
        },
        {
          type: 'less',
          name: 'age',
          value: 30
        }
      ]
    }
  },
  {
    type: 'detail',
    btnName: '详情'
  },
  {
    type: 'edit',
    btnName: '编辑',
    showParam: {
      type: '&',
      data: [
        {
          type: 'more',
          name: 'age',
          value: 19
        },
        {
          type: 'less',
          name: 'age',
          value: 30
        }
      ]
    }
  },
  {
    type: 'delete',
    btnName: '删除'
  }
]
const tableProps = [
  {
    prop: 'date',
    label: '日期'
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'sex',
    label: '性别'
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'address',
    label: '地址',
    width: 250
  }
]
const tableProps2 = [
  {
    prop: 'date',
    label: '日期'
  },
  {
    prop: 'name',
    label: '姓名',
    subcomponent: demo1Sub
  },
  {
    prop: 'sex',
    label: '性别'
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'address',
    label: '地址',
    showOverflowtooltip: true
  }
]
const tableProps3 = [
  {
    prop: 'date',
    label: '日期'
  },
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'sex',
    label: '性别'
  },
  {
    prop: 'record',
    label: '历史记录',
    subcomponent: InnerTable
  },
  {
    prop: 'address',
    label: '地址'
  }
]
export default {
  name: 'SingleHead',
  data() {
    return {
      tableProps,
      tableData: [],
      tableProps2,
      tableData2: [],
      tableProps3,
      tableBtn,
      tableData4: [],
      tableData5: []
    }
  },
  mounted() {
    ;(this.tableData = [
      {
        date: '2016-05-02',
        name: '王小虎',
        sex: '男',
        age: 18,
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        sex: '男',
        age: 28,
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        sex: '男',
        age: 19,
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        sex: '男',
        age: 31,
        address: '上海市普陀区金沙江路 1516 弄'
      }
    ]),
      (this.tableData2 = [
        {
          date: '2016-05-02',
          name: '王小虎',
          sex: '男',
          age: 18,
          address:
            '上海市普陀区金沙江路 1518 弄,朱自清的散文创作，从清秀隽永到质朴腴厚再到激进深邃，打上鲜明的时代印记，显示出他独特的艺术风格和审美旨趣。郁达夫在《新文学大系·现代散文导论》中说：“朱自清虽则是一个诗人，可是他的散文仍能够贮满那一种诗意。”应该说，这是对朱自清散文艺术的一个很精致的评价。'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          sex: '男',
          age: 18,
          address:
            '上海市普陀区金沙江路 1517 弄,朱自清的散文创作，从清秀隽永到质朴腴厚再到激进深邃，打上鲜明的时代印记，显示出他独特的艺术风格和审美旨趣。郁达夫在《新文学大系·现代散文导论》中说：“朱自清虽则是一个诗人，可是他的散文仍能够贮满那一种诗意。”应该说，这是对朱自清散文艺术的一个很精致的评价。'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          sex: '男',
          age: 18,
          address:
            '上海市普陀区金沙江路 1519 弄,朱自清的散文创作，从清秀隽永到质朴腴厚再到激进深邃，打上鲜明的时代印记，显示出他独特的艺术风格和审美旨趣。郁达夫在《新文学大系·现代散文导论》中说：“朱自清虽则是一个诗人，可是他的散文仍能够贮满那一种诗意。”应该说，这是对朱自清散文艺术的一个很精致的评价。'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          sex: '男',
          age: 18,
          address:
            '上海市普陀区金沙江路 1516 弄,朱自清的散文创作，从清秀隽永到质朴腴厚再到激进深邃，打上鲜明的时代印记，显示出他独特的艺术风格和审美旨趣。郁达夫在《新文学大系·现代散文导论》中说：“朱自清虽则是一个诗人，可是他的散文仍能够贮满那一种诗意。”应该说，这是对朱自清散文艺术的一个很精致的评价。'
        }
      ]),
      (this.tableData4 = [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [
                {
                  id: 311,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                  id: 321,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }
              ]
            },
            {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]),
      (this.tableData5 = [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          sex: '男',
          record: 18,
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          sex: '男',
          record: 18,
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          sex: '男',
          record: 18,
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          sex: '男',
          record: 18,
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ])
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    setCurrent(index) {
      this.$refs.palletTable1.setCurrent('palletTable', index)
    },
    handleCurrentChange(val) {
      console.log(val)
    },
    handleClick(val) {
      console.log(val)
    },
    selectChange(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.single-head {
  .demo-box {
    margin-bottom: 40px;
    .description code {
      color: #5e6d82;
      background-color: #e6effb;
      margin: 0 4px;
      display: inline-block;
      padding: 1px 5px;
      font-size: 12px;
      border-radius: 3px;
      height: 18px;
      line-height: 18px;
    }
  }
}
</style>
<style lang="scss">
.single-head {
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
}
</style>