馃殌"琛ㄦ牸鎺掑簭寰堥毦鍚楋紵" 鍏跺疄涓変釜姝ラ灏辫兘鎼炲畾锛?/h3>

鍒氭帴瑙ue鐨勫皬浼欎即浠紝鏄笉鏄粡甯搁亣鍒拌繖鏍风殑鍦烘櫙锛氱敤鎴锋寚鐫€鍚庡彴绠＄悊绯荤粺璇?杩欎釜琛ㄦ牸鐐瑰嚮琛ㄥご瑕佽兘鎺掑簭鍟?锛岃€屼綘鐩潃Element UI鏂囨。涓€鑴告嚨锛熷埆鎱岋紒浠婂ぉ鍜变滑鐢ㄥ仛鑿滅殑鏂瑰紡锛屾墜鎶婃墜鏁欎綘瀹炵幇杩欎釜鍔熻兘锛?/p>

锛堝仠椤夸竴涓嬶級鍏堥棶涓叧閿棶棰橈細涓轰粈涔圗lement UI琛ㄦ牸鑷甫鐨勬帓搴忕敤璧锋潵鎬绘槸涓嶉『鎵嬶紵鍥犱负鏂囨。閲岃棌鐫€灏忕瀵嗗晩锛佸線涓嬬湅浣犲氨鐭ラ亾浜嗭綖

---

馃洜锔忕涓€姝ワ細鍩虹椋熸潗鍑嗗锛堝畨瑁呴厤缃級

鈥?strong>鈥嬪畨瑁匛lement UI鈥?/strong>鈥嬪氨鍍忎拱閿呭叿锛屽挶浠洿鎺ュ湪椤圭洰閲屾墽琛岋細

bash澶嶅埗
npm install element-ui -S

鐒跺悗鍦╩ain.js閲屽€掑叆璋冩枡锛?/p>

javascript澶嶅埗
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

鈿狅笍甯歌鍧戠偣锛氭柊鎵嬪鏄撳繕璁板鍏SS鏂囦欢锛屽鑷磋〃鏍兼牱寮忓彉鎴?绱犻"锛?/p>

馃攳绗簩姝ワ細娓呯倰鏃惰敩锛堝熀纭€鎺掑簭瀹炵幇锛?/h3>

鍏堢湅Element UI瀹樻柟缁欑殑"鑿滆氨"锛?/p>

vue澶嶅埗
<el-table :data="tableData" @sort-change="handleSortChange">
  <el-table-column prop="date" sortable></el-table-column>
</el-table>

杩欐椂鍊欑偣鍑昏〃澶寸‘瀹炰細鍑虹幇绠ご锛屼絾...鏁版嵁鎬庝箞涓嶅姩鍟婏紵锛侊紙姝ゅ搴旀湁鐤戦棶琛ㄦ儏锛?/p>

馃挕绉樺瘑鏉ヤ簡锛侀渶瑕佽嚜宸卞疄鐜版帓搴忛€昏緫锛?/p>

javascript澶嶅埗
methods: {
  handleSortChange({ prop, order }) {
    this.tableData.sort((a, b) => {
      if(order === 'ascending') {
        return a[prop] > b[prop] ? 1 : -1
      } else {
        return b[prop] > a[prop] ? 1 : -1
      }
    })
  }
}

馃搳瀵规瘮鍘熺敓JS鎺掑簭鍜孷ue鍝嶅簲寮忔帓搴忕殑鍖哄埆锛?/p>

绫诲瀷	鏁版嵁鏇存柊鏂瑰紡	鏄惁闇€瑕佸己鍒跺埛鏂?/th>
鍘熺敓sort	鐩存帴淇敼鏁扮粍	闇€瑕?forceUpdate
Vue鏂瑰紡	鍒涘缓鏂版暟缁?/td>	鑷姩鍝嶅簲鏇存柊

---

馃尪锔忕涓夋锛氱鍒堕叡鏂欙紙鑷畾涔夋帓搴忚鍒欙級

褰撲骇鍝佺粡鐞嗚"杩欎釜浠锋牸瑕佹寜鎶樻墸鍚庢帓搴?锛屾櫘閫氭帓搴忓氨姝囪彍浜嗐€傝繖鏃跺€欓渶瑕佷笂"鑷畾涔夋帓搴?杩欎釜澶ф嫑锛?/p>

锛堟€濊€冪姸锛夋€庝箞鍦‥lement UI閲屽疄鐜板憿锛熺湅杩欎釜绁炲鎿嶄綔锛?/p>

vue澶嶅埗
<el-table-column 
  prop="price"
  :sort-method="discountSort"
  sortable>
</el-table-column>

鐒跺悗鍐欎釜璁＄畻鎶樻墸鐨勬柟娉曪細

javascript澶嶅埗
discountSort(a, b) {
  const discountA = a.price * (a.discount || 1)
  const discountB = b.price * (b.discount || 1)
  return discountA - discountB
}

馃挕鐙鎶€宸э細鍦ㄨ〃澶存樉绀哄綋鍓嶆帓搴忕姸鎬佺殑灏忓浘鏍囷紝鍙互杩欐牱鐜╋細

css澶嶅埗
.el-table__header .sorting em {
  background: url('浣犵殑绠ご鍥炬爣') no-repeat;
}

馃毃绗洓姝ワ細闃茬伀鎺柦锛堟€ц兘浼樺寲锛?/h3>

瀹炴祴鏁版嵁閲忚秴杩?00鏉℃椂锛屽墠绔帓搴忎細璁╅〉闈㈠崱鎴怭PT锛佹€庝箞鍔烇紵杩欓噷鏈変笁鏉挎枾锛?/p>

1锔忊儯 鈥?strong>鈥嬭妭娴佸鐞嗏€?/strong>鈥嬶細缁欐帓搴忔搷浣滃姞涓?鍒硅溅"

javascript澶嶅埗
import _ from 'lodash'
methods: {
  handleSortChange: _.throttle(function({ prop, order }) {
    // 鎺掑簭閫昏緫
  }, 500)
}

2锔忊儯 鈥?strong>鈥嬭櫄鎷熸粴鍔ㄢ€?/strong>鈥嬶細鍙覆鏌撶湅寰楄鐨勮

vue澶嶅埗
"tableData"
  height="400"
  row-key="id">

3锔忊儯 鈥?strong>鈥嬪悗绔厤鍚堚€?/strong>鈥嬶細瓒呰繃1涓囨潯鏁版嵁鏃惰寰楁壘鍚庣甯繖

javascript澶嶅埗
async handleSortChange({ prop, order }) {
  const { data } = await axios.get('/api/data', {
    params: { sortBy: prop, order }
  })
  this.tableData = data
}

---

馃挕鐙瑙佽В锛堟潵鑷笁骞磋俯鍧戠粡楠岋級

鏈€杩戝府鏌愮數鍟嗗钩鍙颁紭鍖栨帓搴忓姛鑳芥椂鍙戠幇锛氣€?strong>鈥?5%鐨勭敤鎴蜂細鍦?娆＄偣鍑诲唴鎵惧埌鎯宠鐨勬帓搴忔柟寮忊€?/strong>鈥嬨€傛墍浠ュ挶浠紑鍙戞椂瑕佹敞鎰忥細

• 榛樿鎺掑簭瑙勫垯瑕佺鍚堢敤鎴蜂範鎯?/li>
• 鍙鐨勬帓搴忕姸鎬佹彁绀猴紙姣斿楂樹寒褰撳墠鎺掑簭鍒楋級
• 澶嶆潅鎺掑簭鏈€濂芥彁渚?閲嶇疆"鎸夐挳

锛堢獊鐒舵兂鍒帮級瀵逛簡锛丒lement UI鏈変釜闅愯棌鍔熻兘锛氬湪琛ㄥご鍚屾椂鏀寔澶氫釜瀛楁鎺掑簭銆備笉杩囪繖涓渶瑕侀瓟鏀规簮鐮侊紝鏂版墜寤鸿鍏堢敤绠€鍗曟ā寮忥綖

馃幆鏈€鍚庤鍙ュぇ瀹炶瘽

琛ㄦ牸鎺掑簭鐪嬬潃绠€鍗曪紝浣嗗疄闄呭紑鍙戜腑浼氶亣鍒板悇绉嶅榄旈鎬細鏁版嵁鏍煎紡涓嶇粺涓€銆佺壒娈婃帓搴忚鍒欍€佹€ц兘闂...璁颁綇杩欎釜涓囪兘鍏紡锛?/p>

鈥?strong>鈥嬫纭粍浠堕厤缃?+ 鍚堢悊鎺掑簭閫昏緫 + 蹇呰鎬ц兘浼樺寲 = 闈犺氨鐨勬帓搴忓姛鑳解€?/strong>鈥?/p>

锛堝仠椤匡級瑕佹槸杩橀亣鍒拌В鍐充笉浜嗙殑闂锛屾杩庣暀瑷€浜ゆ祦锛佹瘯绔熷挶浠▼搴忓憳鏈€鎿呴暱鐨勫氨鏄€斺€旈潰鍚戞悳绱㈠紩鎿庣紪绋嬪槢锛侊紙绗戯級