vue_Element（笔记） el-table和el-select简单使用 动态数据渲染

下拉框

<el-select
        popper-class="p-select"
        class="list-s"
        v-model="value1"
        size="mini"
        clearable
        :popper-append-to-body="false"     //更改样式必须属性
        placeholder="name"
      >
        <el-option                      //遍历
          v-for="item in lists"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
   </el-select>

data

 data() {
    return {
      value1: "",
      lists: [],
    }
  },

table表格

 <el-table :data="lists">
        <el-table-column label="编号" align="center" prop="id" />
        <el-table-column label="名称" align="center" prop="name" />
        <el-table-column label="创建人" align="center" prop="person" />
        <el-table-column label="备注" align="center" prop="nom## 标题" />
      </el-table>

js

mounted() {
    this.created();
},
methods: {
    created() {
      let _this = this;
      var list = require("../../static/carmes"); //获取json文件
      console.log(list);
      _this.lists = JSON.parse(JSON.stringify(list.data)); //转化并存到数组
      console.log(this.lists);    
    },
}