本文已参与[新人创作礼]活动，一起开启掘金创作之路。

element-ui插件安装：

npm install element-ui

在Vue中使用element UI插件。

main.js

...
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
...

table自定义

table：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

官网地址：element.eleme.cn/#/zh-CN/com…

在Vue开发中，常见的列表展示一般使用table实现，在element UI中，就有table组件。

<el-table 
...
:data="tableData" 
...
</el-table>

其中，tableData就是数据列表，为一个数组。该组件就是展示tableData里面的数据。

其中，还有自定义表格，结合其他组件使用，其中的自定义可以使用插槽来实现。

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。

这是一列的内容：

可以看见，该列除了显示数据外，还做了一些操作，即鼠标悬浮在姓名上展示姓名和地址。

还有可以对表格添加操作列，比如每一行的编辑和删除操作。

编辑和删除时都需要使用这行的数据，所以通过scope就能获取到这一行的数据，如该行的索引和数据。

scope内容：

scope里面就是表格的一些属性，其中$index就是操作的第几行，从0开始。row就是这一行的数据。

slot-scope="scope" 获取当前行。

scope.$index 获取当前行的索引。

scope.row 获取当前行的数据，一般为一个对象。

select自定义

官网地址：element.eleme.cn/#/zh-CN/com…

select选择器中的option也可以自定义，比如对每个option的编辑、删除等操作，需要通过el-option的slot实现。

实现option的编辑和删除：

...
<el-select v-model="dataSelect" placeholder="请选择" @change="getData">
    <el-option
      v-for="item in dataList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; margin-left: 10px" @click.stop="editOption(item)">编辑</span>
      <span style="float: right; margin-left: 10px" @click.stop="deleteOption(item.value)">删除</span>
    </el-option>
    <el-button type="primary" size="small">新增option</el-button>
</el-select>
...
data() {
    return {
      dataList: [
        {
          value: "one",
          label: "数据1",
        },
        {
          value: "two",
          label: "数据2",
        }
      ],
      dataSelect: "",
    };
},
methods: {
    editOption(item){
        console.log(item);
    },
    deleteOption(item){
        console.log(item);
    },
    getData(){
        console.log(this.dataSelect);
    }
},
...

其中，编辑和删除的点击操作需要使用@click.stop。

在el-option中：

:key="item.value"
:label="item.label"
:value="item.value"

:label="item.label" 选项的标签，若不设置则默认与value相同，定义显示在界面上的内容。

:value="item.value" 选项的值，定义获取的值。

element UI的table自定义和select自定义的理解

table自定义

select自定义