Version
3.27
Vue Version
vue3
Link to minimal reproduction
改变字段
<tiny-grid-column type="index" width="80" fixed="left" ></tiny-grid-column>
<tiny-grid-column
v-for="(item, index) in filterColumnConfig"
:key="index"
:title="item.title"
:field="item.field"
:fixed="item.fixed"
:sortable="item.sortable"
:filter="item.filter"
>
</tiny-grid-column>
<script setup>
import {ref, reactive,computed } from 'vue'
import { TinyNotify,TinyButton, TinyGrid, TinyGridColumn, TinyGridToolbar } from '@opentiny/vue'
const filterColumnConfig = computed(() => {
const columnSource = panelColumns.value;
return columnSource
});
const panelColumns = ref([
{ title: "name", field: "name"},
{ title: "city", field: "city" },
{ title: "employees", field: "employees" },
{ title: "createdDate", field: "createdDate"}
]);
const handleClick=()=>{
TinyNotify({
type: 'info',
title: 'XXXX',
message: 'XXX正文',
position: 'top-right',
duration: 5000,
customClass: 'my-custom-cls'
})
panelColumns.value = [
{ title: "name", field: "name" , fixed: "right"},
{ title: "city", field: "city" , fixed: "right"},
{ title: "employees", field: "employees" },
{ title: "createdDate", field: "createdDate"}
]
}
const tableData = reactive([
{
id: '1',
name: 'GFD 科技 YX 公司',
city: '福州',
employees: 800,
createdDate: '2014-04-30 00:56:00'
},
{
id: '2',
name: 'WWW 科技 YX 公司',
city: '深圳',
employees: 300,
createdDate: '2016-07-08 12:36:22'
},
{
id: '3',
name: 'RFV 有限责任公司',
city: '中山',
employees: 1300,
createdDate: '2014-02-14 14:14:14'
},
{
id: '4',
name: 'TGB 科技 YX 公司',
city: '龙岩',
employees: 360,
createdDate: '2013-01-13 13:13:13'
},
{
id: '5',
name: 'YHN 科技 YX 公司',
city: '韶关',
employees: 810,
createdDate: '2012-12-12 12:12:12'
},
{
id: '6',
name: 'WSX 科技 YX 公司',
city: '黄冈',
employees: 800,
createdDate: '2011-11-11 11:11:11'
},
{
id: '7',
name: 'KBG 物业 YX 公司',
city: '赤壁',
employees: 400,
createdDate: '2016-04-30 23:56:00'
},
{
id: '8',
name: '深圳市福德宝网络技术 YX 公司',
city: '厦门',
employees: 540,
createdDate: '2016-06-03 13:53:25'
}
])
</script>
Step to reproduce
点击“改变字段”按钮，重新设置字段属性
What is expected
设置固定列能成功
What is actually happening
No response
What is your project name
tiny-vue
Any additional comments (optional)
No response