elementui表格隐藏列

要在ElementUI表格中隐藏列，可以使用 `show-overflow-tooltip` 属性和 `tooltip-effect` 属性。具体步骤如下：

1. 在表格列的定义中，为需要隐藏的列添加 `show-overflow-tooltip` 属性。

<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>

2. 在表格组件中，添加 `tooltip-effect` 属性并设置为 `'dark'` 或 `'light'`，以使隐藏的列显示为省略号。如果设置为 `'none'`，则隐藏的列将不会显示任何省略号。

<el-table :data="tableData" tooltip-effect="dark">
  <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

这样，表格中添加了 `show-overflow-tooltip` 属性的列将会自动隐藏，并在鼠标悬浮时显示为省略号。

相关问题

elementUI表格勾选框如何隐藏部分勾选框

Element UI是一个基于Vue 2.0的桌面端组件库，它提供了一套完整的组件来帮助开发者快速搭建优雅的页面。在Element UI的表格组件中，如果你想要隐藏某些行的勾选框，可以通过自定义列模板的方式来实现。

这里有一个简单的例子来说明如何隐藏部分勾选框：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55"></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 label="操作">
      <template slot-scope="scope">
        <!-- 判断当前行是否需要显示勾选框 -->
        <el-checkbox v-if="showCheck(scope.$index)" v-model="scope.row.checked"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '张小刚',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '李小红',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    // 根据条件判断是否显示勾选框
    showCheck(index) {
      // 这里可以根据实际需求返回true或false
      // 例如，我们可以决定每隔一行显示一个勾选框
      return index % 2 === 0;
    }
  }
}
</script>

在上面的代码中，我们通过`<el-table-column>`的自定义模板`slot-scope="scope"`来控制勾选框的显示。`showCheck`方法用于决定是否显示某一行的勾选框。这里以简单的方式举例，实际应用中你可以根据实际的数据条件来决定是否显示。

elementui表格与编辑对话框

ElementUI提供了一个非常方便的表格组件，可以用于展示数据，同时也提供了编辑对话框组件，可以用于编辑表格中的数据。

下面是一个使用ElementUI表格和编辑对话框的例子：

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="编辑" :before-close="handleClose">
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市海淀区' },
        { name: '李四', age: 20, address: '上海市浦东新区' },
        { name: '王五', age: 25, address: '广州市天河区' }
      ],
      dialogVisible: false,
      editForm: {
        name: '',
        age: '',
        address: ''
      },
      editIndex: -1
    }
  },
  methods: {
    handleEdit(index, row) {
      this.editIndex = index
      this.editForm = Object.assign({}, row)
      this.dialogVisible = true
    },
    handleSave() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.tableData.splice(this.editIndex, 1, this.editForm)
          this.dialogVisible = false
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

这个例子展示了一个简单的表格，每行数据包括姓名、年龄和地址，同时还有一个“编辑”按钮，点击后会弹出一个对话框，用于编辑该行数据。

在Vue组件的data中，我们定义了一个tableData数组，用于存储表格中的数据。同时也定义了一个dialogVisible变量，用于控制编辑对话框的显示和隐藏。editForm变量用于存储正在编辑的行数据，editIndex用于记录正在编辑的行的索引。

在表格组件中，我们使用el-table-column标签定义表格的列，其中prop属性指定该列对应数据对象中的属性名。我们还定义了一个“操作”列，其中使用了slot-scope指令，用于定义该列中的按钮组件。

在编辑对话框组件中，我们使用了el-dialog和el-form组件，分别用于定义对话框和表单。在el-form中，我们使用v-model指令绑定每个表单项的值，同时使用prop属性指定该表单项对应数据对象中的属性名。在el-dialog中，我们使用:before-close属性指定当对话框关闭时调用的方法，用于确认是否关闭对话框。

在Vue组件的methods中，我们定义了handleEdit、handleSave和handleClose三个方法，分别用于处理“编辑”按钮的点击事件、保存编辑后的数据和关闭对话框。在handleEdit方法中，我们使用Object.assign方法将当前行数据复制到editForm变量中，以便在编辑对话框中显示。在handleSave方法中，我们使用splice方法将编辑后的数据替换掉原来的数据。在handleClose方法中，我们使用this.$confirm方法显示一个确认框，用户确认后调用done方法关闭对话框。

以上是一个简单的使用ElementUI表格和编辑对话框的例子，可以根据实际需求进行修改和扩展。