使用：
<Table border ref="selection" :columns="columns" :data="listData" :loading="false"></Table>
複製程式碼設定：
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '排序值',
key: 'sortOrder',
align: 'center'
},
{
title: '品牌連結',
key: 'siteUrl',
align: 'center',
render: (h, params) => {
return h('a', {
attrs: {
href: params.row.siteUrl,
},
class:{
siteUrl: true,
}
}, params.row.siteUrl);
}
},
{
title: '操作',
align: 'center',
render: (h, params) => {
let row = params.row;
return h('div', [
h('Button', {
props: {
type: 'ghost',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.toCheckDetails(row.id);
}
}
}, '檢視'),
h('Button', {
props: {
type: 'ghost',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.toEdit(row.id);
}
}
}, '編輯')
]);
}
}
]
複製程式碼屬性大全：
render: (h, params) {//params是一個物件，包含 row、column 和index，分別指當前行資料，當前列資料，當前行索引
return h('div', {
props: { // Component props
msg: 'hi',
},
attrs: { // normal HTML attributes
id: 'foo'
},
domProps: { // DOM props
innerHTML: 'bar'
},
on: { // Event handlers
click: this.clickHandler
},
// For components only. Allows you to listen to native events, rather than events emitted from the component using vm.$emit.
nativeOn: {
click: this.nativeClickHandler
},
class: { // class is a special module, same API as `v-bind:class`
foo: true,
bar: false
},
style: { // style is also same as `v-bind:style`
color: 'red',
fontSize: '14px'
},
// other special top-level properties
key: 'key',
ref: 'ref',
// assign the `ref` is used on elements/components with v-for
refInFor: true,
slot: 'slot'
})
}
複製程式碼table元件input值的繫結和獲取： 1、render函式中不能直接使用v-model； 2、解決辦法：
render: (h, {row}) => {
return h('Input', {
props: {
clearable: true,
placeholder: '標籤編號',
value: row.tagCode,
},
on: {
input: (val) => {
row.tagCode = val;
}
}
});
}
複製程式碼