Vue + Element UI

前言

后臺管理系統,需要這個功能點的特別多,但Element UI 的table組件本身是不提供的,所以需要自行拓展一下。 在這里,給大家寫一個簡單的示例,希望對小伙伴們有所幫助。

先看看效果圖:

el-table

我們直接去Element UI 官網 把 table組件的代碼copy過來

<template>  <p>    <el-table      ref="filterTable"      :data="tableData"      style="width: 100%">      <el-table-column        prop="date"        label="日期"        width="180"      >      </el-table-column>      <el-table-column        prop="name"        label="姓名"        width="180">      </el-table-column>      <el-table-column        prop="address"        label="地址"        :formatter="formatter">      </el-table-column>      <el-table-column        prop="tag"        label="標簽"        width="100"        :filters="tagList"        :filter-method="filterTag"        filter-placement="bottom-end">        <template slot-scope="scope">          <el-tag            :type="scope.row.tag === '家' ? 'primary' : 'success'"            disable-transitions>{{scope.row.tag}}</el-tag>        </template>      </el-table-column>    </el-table>  </p></template><script>  export default {    data() {      return {        tagList: [{ text: '家', value: '家' }, { text: '公司', value: '公司' }],        tableData: [{          date: '2016-05-02',          name: '張三',          address: '深圳',          tag: '家'        }, {          date: '2016-05-04',          name: '李四',          address: '北京',          tag: '公司'        }, {          date: '2016-05-01',          name: '王五',          address: '上海',          tag: '家'        }, {          date: '2016-05-03',          name: '李六',          address: '北京',          tag: '公司'        }]      }    },    methods: {      filterTag(value, row) {        return row.tag === value;      },      formatter(row, column) {        return row.address;      }    }  }</script>

稍稍的修整了一下,把tags的filters提到data里面作為變量了,后續可以用。

然后我們添加一個按鈕,來添加行

table動態插入行

<template>  <p>    <el-button @click="add">添加一條</el-button>    <el-table      >      ...      ...    </el-table>  </p></template><script>...methods: {  add() {    this.tableData.push({      date: '2019-4-01',      name: '默認數據',      address: '上海',      tag: '公司',      status: 1    });  }}...</script>

add方法,向el-table的數據源tableData里面push一條新的數據,并且添加一個字段,我這里叫status(名字隨便啦)。主要用來區分這條數據的當前狀態,是編輯態,還是已經保存了的。1就是編輯態,如果保存了,我們就改為0。

有了status這個狀態,我們就去修改el-table組件,根據status這個狀態來判斷,是顯示可以編輯,還是不可編輯。

el-table組件修改

這時候,我們就去自定義每列內容

日期列

...<el-table-column  prop="date"  label="日期"  width="180">  <template slot-scope="scope">    <el-date-picker      v-if="scope.row.status"      v-model="scope.row.date"      type="date"      placeholder="選擇日期">    </el-date-picker>    <span v-else>{{scope.row.date}}</span>  </template></el-table-column>

判斷,如果scope.row.status有值(編輯態),我們就用日期組件el-date-picker,否則就用span標簽,直接渲染數據。

這里日期組件同樣可以直接使用v-model雙向綁定。

同理完成其他列

姓名

<el-table-column  prop="name"  label="姓名"  width="180">  <template slot-scope="scope">    <el-input v-if="scope.row.status" v-model="scope.row.name"></el-input>    <span v-else>{{scope.row.name}}</span>  </template></el-table-column>

地址

<el-table-column  prop="address"  label="地址"  :formatter="formatter">  <template slot-scope="scope">    <el-select  v-if="scope.row.status" v-model="scope.row.address" placeholder="請選擇">      <el-option        v-for="item in cityList"        :key="item"        :label="item"        :value="item">      </el-option>    </el-select>    <span v-else>{{scope.row.address}}</span>  </template></el-table-column>

標簽

<el-table-column  prop="tag"  label="標簽"  width="100"  :filters="tagList"  :filter-method="filterTag"  filter-placement="bottom-end">  <template slot-scope="scope">    <el-select  v-if="scope.row.status" v-model="scope.row.tag" placeholder="請選擇">      <el-option        v-for="item in tagList"        :key="item.value"        :label="item.text"        :value="item.value">      </el-option>    </el-select>    <el-tag      v-else      :type="scope.row.tag === '家' ? 'primary' : 'success'"      disable-transitions>{{scope.row.tag}}</el-tag>  </template></el-table-column>

上面用到了1個變量,用來選擇城市的,我們在data里面添加一下

...data() {  return {    cityList: ['北京', '深圳', '上海']    ...  }}

這樣就基本完成了第一張圖的功能,但是需要新增的時候,同時保存沒有保存的功能。

保存

這里我們會用到上面提到過的status,1是編輯態,如果保存了,我們就改為0。

ok,在新增的時候,我們先判斷,有沒有未保存的數據,也就是有沒有數據的status為1,如果是1,我們就將這條數據的status改為0。

...add() {  this.tableData.map(item=>{    if(item.status){      item.status = 0;    }    return item;  })  ...}

是不是超級簡單了?

這里我們其實還有一個問題,日期重新選擇,保存后,格式不對,這個問題就留給大家了?看看你們有什么辦法來解決吧?期待你的答案。