vue element table switch开关组件

最新推荐文章于 2024-08-23 12:55:21 发布

Claroja

最新推荐文章于 2024-08-23 12:55:21 发布

阅读量811

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/claroja/article/details/113823463

版权

vue 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js中利用Element UI的<el-table>组件来渲染数据列表，包括姓名、状态（通过<el-switch>实现开关效果）和详细数据。示例代码中，数据绑定到表格列，并且通过slot-scope定制了状态列和详细数据列的内容展示。

摘要由CSDN通过智能技术生成

<template>
  <!--data绑定整个列表-->
  <el-table
    :data="tableData"
    style="width: 100%">
    <!--prop用来绑定列明,对应对象的key-->
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!--使用switch组件来渲染开关-->
    <el-table-column
      label="状态"
      width="180">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.state"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <!--使用template的slot-scope来接收当前行的数据,用来定制化数据,比如取年份-->
    <el-table-column
      label="详细数据">
      <template slot-scope="scope">
        {{scope.row}}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      tableData: [{
        name: '王小虎',
        state: true
      }, {
        name: '王小虎',
        state: false
      }]
    }
  }
}
</script>
<style scoped>

</style>