element ui

main.js:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

app.vue:

 

vue02.vue:

<template>
  <div>
    <el-table
    ref="multipleTable"
    :data="tableData3"
    style="width: 100%"
    class="project_new"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="项目名称"
      width="120">
<!--      <template slot-scope="scope">{{ scope.row.date }}</template>-->
    </el-table-column>
    <el-table-column
      prop="leader"
      label="项目负责人"
      width="120">
    </el-table-column>
    <el-table-column
      prop="app_name"
      label="应用名称"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

  <div style="margin-top: 20px">
<!--    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Toggle selection status of second and third rows</el-button>-->
    <el-button @click="toggleSelection()">Clear selection</el-button>
    </div>

  </div>

</template>

<script>
    export default {
        name: "ProjectNew",
        data() {
            return {
                project_headers: ["项目名称", "项目负责人", "应用名称"],
                tableData3: [
                    {name: 'api_test', leader: '李白', app_name: 'api_test'},
                    {name: 'web_test', leader: '杜甫', app_name: 'web_test'},
                    {name: 'app_test', leader: '白居易', app_name: 'app_test'},
                ],
                multipleSelection: [],
            }
        },
        methods: {
            toggleSelection() {
                this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
        },
    }
</script>

<style scoped>

    .project_new{
        margin: 50px 500px;
    }

</style>