Ant Design Vue中表格無法編輯怎麼辦?下面Vue.js專欄給大家記錄分享表格無法編輯的解決方法,希望對大家有幫助!
Ant Design Vue 表格無法編輯解決方案
#一個簡單的需求:直接編輯表格中的內容,例如順序編號這一
但始終無法編輯,查了好久終於發現問題出在表格綁定的陣列data 上,它不是響應式的
const data = [ { key: '1', name: 'John Brown', age: 32 }, { key: '2', name: 'Jim Green', age: 42 }, { key: '3', name: 'Joe Black', age: 33 }, ];
得做成響應式才行!
const data = ref([ { key: '1', name: 'John Brown', age: 32 }, { key: '2', name: 'Jim Green', age: 42 }, { key: '3', name: 'Joe Black', age: 33 }, ]);
Ant Design Vue 前面幾個表格綁定的陣列data 都沒有用到ref,如果套用了這幾個範例還想編輯表格的話,一定記得加上ref
附上開頭表格的程式碼,供大家參考
<script> import { defineComponent, ref } from 'vue'; const columns = [ { title: '序号', dataIndex: 'key'}, { title: '表单名称', dataIndex: 'name' }, { title: '顺序号', dataIndex: 'age', slots: { customRender: 'age'} }, ]; const data = ref([ { key: &#39;1&#39;, name: &#39;John Brown&#39;, age: 32 }, { key: &#39;2&#39;, name: &#39;Jim Green&#39;, age: 42 }, { key: &#39;3&#39;, name: &#39;Joe Black&#39;, age: 33 }, ]); export default defineComponent({ name: "FormConfiguration", setup() { return { columns, data, } } }) </script>
Ant Design Vue 完整版的編輯表格範例其實是用到ref 的
#【相關推薦:《vue.js教學》】
以上是AntDesign Vue中表格無法編輯怎麼辦? (記錄下解決方法)的詳細內容。更多資訊請關注PHP中文網其他相關文章!