ElementUI--Table

```

<template>

  <div>

    <el-row :gutter="10">

      <el-col :span="6">

        <el-button type="primary" size="mini"  @click="handleSelection"

          >获取选中的行</el-button

        >

      </el-col>

    </el-row>

     <!-- el-row :gutter：分栏间隔 -->

    <!-- el-col :offset：分栏偏移 -->

    <!-- el-row type="flex"对齐方式 -->

    <el-table

      :data="tableData"

      border

      stripe

      height="300px"

      style="width: 100%"

       @selection-change="handleSelectionChange"

    >

       <!-- 通过:data属性--绑定数据 -->

      <!-- border：竖向边框 -->

      <!-- stripe：斑马线效果，即隔行换色效果 -->

      <!-- height：固定表头，即固定表格table的高度，超出显示滚动条，在内部滚动 -->

      <!-- @selection-change="handleSelectionChange" => 获取到当前选中的行 -->

      <el-table-column

        header-align="center"

        align="center"

        type="selection"

      ></el-table-column>

      <el-table-column

        header-align="center"

        align="center"

        label="序号"

        type="index"

        width="100"

      >

      </el-table-column>

      <el-table-column prop="date" label="日期" width="180"></el-table-column>

       <!-- fixed="left" -->

       <!-- fixed：固定列，需要固定谁就给谁添加，left/right -->

      <!-- prop：用来决定展示哪一个属性的值；label:设置表格头 -->

      <!-- header-align：表头显示方式 -->

      <!-- align：首列显示方式 -->

      <!-- type：序列号index/多选框selection -->

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

      <el-table-column label="地址" prop="address"></el-table-column>

      <el-table-column header-align="center" align="center" label=" *** 作">

        <template  slot-scope="scope" >

          <el-button

            type="primary"

            icon="el-icon-edit"

            size="mini"

             @click="handleEiit(scoperow)"

            >编辑</el-button

          >

          <el-button

            type="danger"

            icon="el-icon-delete"

            size="mini"

             @click="handleDelete(scoperow)"

            >删除</el-button

          >

           <!-- scoperow 获取当前行的数据 -->

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  name: "Table",

  methods: {

    handleSelectionChange(value) {

      consolelog(value);  //默认会返回，所有选中的行；获取到当前选中的行

      thisselections = value;  //为value赋值

    },

    handleSelection() {

      consolelog(thisselections);  //通过selections事件，不断的去记录当前选中的数据

    },

    handleEiit(row) {

      consolelog(row);

    },

    handleDelete(row) {

      consolelog(row);

    },

  },

  data() {

    return {

      selections: [],  //默认没有选择，保存选中数据

      tableData: [

        { date: "2020-01-01", name: "小不点儿", address: "河北省保定市" },

        { date: "2020-02-02", name: "张三", address: "河北省保定市" },

        { date: "2020-03-03", name: "王五", address: "河北省保定市" },

        { date: "2020-04-01", name: "李四", address: "河北省保定市" },

        { date: "2020-05-01", name: "赵晴", address: "河北省保定市" },

        { date: "2020-06-01", name: "冯峰", address: "河北省保定市" },

        { date: "2020-07-01", name: "小一", address: "河北省保定市" },

        { date: "2020-08-01", name: "大张", address: "河北省保定市" },

        { date: "2020-09-01", name: "吴助", address: "河北省保定市" },

      ],

    };

  },

};

</script>

```

这是数据：

guardianName中还有个数组，如果直接输出，无异于挑战自己的审美。

要在表格中某一行中使用v-for循环输出，但是前提是要先获取这一行的数据 这就要用到scoperow

举个栗子：

这时候scoperow代表的就是表格一行的数据，想要输出stuNamee,就写{{scoperowstuName}}

再举个栗子：

如果我要循环输出guardianName的数组，那就要循环输出的那一列中建立组建template， 设置slot-scope=“scope”，""里面是名字 scope12345都可以

然后在template写个div,span都可以，用来承载v-for语句， 然后在这个例如el-button-group上承载v-for语句

最终展示：

点击时可以获取一整行的信息，目前不知道怎么获取index，但是获取index的目的也是获取点击那一行的信息，所以直接用点击返回的信息也算是一种方法。

-table :data="employees" highlight-current-row border style="width: 100%" @row-click="getEmpDetail" @selection-change="ss"><el-table-column label="员工列表" inline-template><div class="empList"><span class="employeeName">{{ rowemployee_name }}</span><span class="employeeJob">{{ rowtype }}</span></div></el-table-column></el-table>

import ElCheckbox from 'element-ui/packages/checkbox';

import ElTag from 'element-ui/packages/tag';

import Vue from 'vue';

import FilterPanel from '/filter-panelvue';

非常感谢您的提问。如果您想将el-table中的数据转换为JSON格式，可以使用以下步骤：

1 获取el-table中的数据：您可以使用el-table组件提供的API方法，如getTableData()来获取表格中的数据。

2 将数据转换为JSON格式：您可以使用JSONstringify()方法将数据转换为JSON格式的字符串。

3 处理JSON数据：您可以使用JavaScript的JSON对象来处理JSON数据，例如解析JSON数据、访问JSON数据等。

需要注意的是，如果您的el-table中的数据是从后端获取的，那么您需要先将数据转换为JavaScript对象，然后再将其转换为JSON格式。

总之，将el-table中的数据转换为JSON格式并不难，只需要掌握一些基本的JavaScript知识即可。希望我的回答能够对您有所帮助。如果您还有其他问题，欢迎随时向我提问。

效果如图：

表头标题是重复的、为了能看到滚动效果

v-if="lists[0]ispass" 来判断表格列的状态每一列是否显示或隐藏 勾选则展示、取消勾选隐藏、默认勾选

<el-dropdown :hide-on-click="false">

            <i class="iconfont icon-shaixuan" ></i>

            <el-dropdown-menu slot="dropdown" >

              <el-scrollbar style="height: 60vh">//作用是数据过多把表单数据的整体高度固定、多出的区域可以下拉展示

                <el-checkbox-group v-model="check">

                  <el-dropdown-item v-for="(item,index) in checkList" :key="index"><el-checkbox :label="item" :key="item"></el-checkbox>

                  </el-dropdown-item>

                </el-checkbox-group>

              </el-scrollbar>

            </el-dropdown-menu>

</el-dropdown>

<el-table :data="institutionalTypeList" border align="center" v-loading="listLoading" style="width: 100%;" :header-cell-style="tableBg">

        <af-table-column type="index" :index="indexMethod" label="序号" width="90">

        </af-table-column>

        <af-table-column v-if="lists[0]ispass" prop="id" label="编码" >

        </af-table-column>

        <af-table-column v-if="lists[1]ispass" prop="name" label="名称" >

        </af-table-column>

        <af-table-column v-if="lists[2]ispass" prop="updatetime" label="更新时间" >

        </af-table-column>

</el-table>

lists是所有表头标题，check是多选框默认全选，checkList也是所有表头标题、跟多选框绑定的

data() {

      return {

        check:['编码','名称','更新时间'],

        checkList:['编码','名称','更新时间'],

        lists:[

          {label:'编码',ispass:true},

          {label:'名称',ispass:true},

          {label:'更新时间',ispass:true},

        ],

      }

    },

动态监听值选中的选项

watch:{

      check(newVal){

            if (newVal) {

              var arr = thischeckListfilter(i => newValindexOf(i) < 0) //未选中

              thislistsmap(i => {

                if (arrindexOf(ilabel) !== -1) {

                  iispass = false

                } else {

                  iispass = true

                }

              })

            }

      }

    },

以上就是关于ElementUI--Table全部的内容，包括:ElementUI--Table、在el-table的某一行中循环输出 scope.row和v-for、用element的table组件怎么获取每一行的index等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！