<template>
  <div class'table'>
    <el-dialog title='与会情况' :visible.sync='dialogTableVisible'>
      <el-table
        ref='filterTable'
        :data='tableData'
        border
        :header-cell-style='{ background: '#F9F4F4', color: '#333333' }'
      >
        <el-table-column prop='name' label='参会人' width='180' align='center'>
        </el-table-column>
        <el-table-column
          prop='role'
          label='参会角色'
          width='200'
          align='center'
        >
        </el-table-column>
        <el-table-column
          prop='date'
          label='打卡时间'
          width='200'
          align='center'
        >
        </el-table-column>
        <el-table-column prop='remark' label='备注' align='center'>
        </el-table-column>
        <el-table-column
          prop='tag'
          label='状态'
          width='200'
          align='center'
          :filters='[
            { text: '与会', value: '与会' },
            { text: '请假', value: '请假' },
            { text: '缺勤', value: '缺勤' }
          ]'
          :filter-method='filterTag'
          filter-placement='bottom-end'
        >
          <template slot-scope='scope'>
            <el-tag
              :type='scope.row.tag === '与会' ? 'success' : scope.row.tag === '请假' ? 'warning' : 'danger'
              disable-transitions
            >{{ scope.row.tag }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          role: '主持人',
          remark: 'XXXX1',
          tag: '与会'
        },
        {
          date: '2016-05-04',
          name: '李四',
          role: '演讲人',
          remark: 'XXXXX',
          tag: '与会'
        },
        {
          date: '2016-05-01',
          name: '王五',
          role: '',
          remark: 'XXXXXX',
          tag: '请假'
        },
        {
          date: '2016-05-03',
          name: '赵六',
          role: '',
          remark: 'XXXXX',
          tag: '缺勤'
        }
      ]
    }
  },
  methods: {
    openDialog() {
      this.dialogTableVisible = true
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    filterTag(value, row) {
      return row.tag === value
    }
  }
}
</script>
<style lang='scss' scoped>
.table {
  width: 90%;
  margin: auto;
}

.el-table__row {
  height: 50px; // 设置行高度为50px
}
</style>
<p>要改变表格每行的高度,可以通过修改表格行的样式来实现。在样式部分的<code>.table</code>选择器下添加如下代码:</p>
<pre><code class="language-scss">.el-table__row {
  height: 50px; // 设置行高度为50px
}
</code></pre>
<p>修改后的代码如下:</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class='table'&gt;
    &lt;el-dialog title='与会情况' :visible.sync='dialogTableVisible'&gt;
      &lt;el-table
        ref='filterTable'
        :data='tableData'
        border
        :header-cell-style='{ background: '#F9F4F4', color: '#333333' }'
      &gt;
        &lt;!-- 表格列省略 --&gt;
      &lt;/el-table&gt;
    &lt;/el-dialog&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  // 省略部分代码
}
&lt;/script&gt;

&lt;style lang='scss' scoped&gt;
.table {
  width: 90%;
  margin: auto;
}

.el-table__row {
  height: 50px; // 设置行高度为50px
}
&lt;/style&gt;
</code></pre>
<p>通过将<code>.el-table__row</code>选择器下的<code>height</code>属性设置为所需的行高度即可改变表格每行的高度。</p>
Element UI 表格如何设置行高?

原文地址: http://www.cveoy.top/t/topic/qpBr 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录